Home / Questions / 6046
Accepted
Arnau Castellví
Asked: 2020-03-20 07:08:26 +0800 CST 2020-03-20 07:08:26 +0800 CST

CSS3: A transform-origin for each transform?

  • 772

Suppose I have two transformations in the transform property , Ex:

transform: scale(.5,.5) rotate(10deg);

I know that it is possible to set the origin point of the transformations using the property transform-origin, eg:

transform-origin: 0 0;

But that origin point will apply for all transformations of the object.

Is there a way to indicate a different origin point for each transformation?

Example using the method that indicates rnd

* {
  margin:0px;
  padding:0px;
}
#a{
  background-color:green;
  width:100px;
  height:100px;
  display: block;
  transition:1s;
  transition-timing-function: linear;
  transform-origin: left top 0;
}
#a:hover{
  transform:scale(.5);
}
#b {
  width:100px;
  height:100px;
  transition:1s;
  transition-timing-function: linear;
  background-color:red;
  transform-origin: right top 0;
}
#b:hover {
  transform: rotate(-90deg);
}
<div id="a"><div id="b"></div></div>

css3

2 Answers

  1. Best Answer

    Is there a way to indicate a different origin point for each transformation?

    You can't, but you can always use two different elements, and give each one a different origin.

    .externo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform: scale(1, .5);
  transform-origin: 50% 50% 0;
}

.interno {
  background-color: lightblue;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  transform-origin: 0 0 0;
}
    <div class="externo">
  <img class="interno" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
</div>

    • 3

  2. According to the W3C documentation , you can only specify a single transform-originwhich can have one of the following formats:

    [ left | center | right | top | bottom | <percentage> | <length> ]

    either

    [ left | center | right | | <length> ] [ top | center | bottom | <percentage> | ] <length>?

    either

    [[ center | left | right ] && [ center | top | bottom ]] <length>?

    That is, the value of tranform-origincan have 1, 2 or 3 parameters but it will be a single value (and not a list of values) that will be applied to transform(which can be a list).

    So answering your question: no, there is no way to indicate a different origin point for each transformation because only one value is allowed, which will be applied to all the transformations indicated in transform.

    • 1