CSS3: A transform-origin for each transform?

Question

CSS3: A transform-origin for each transform?

Navigation

#1 by (3 votes)
#2 by (1 votes)

4

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

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

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

transform-origin: 0 0;

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

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

Example using the method indicated by 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

asked by Arnau Castellví 19.03.2016 в 16:08

source

2 answers

1

According to the W3C documentation , you can only specify a single transform-origin that You can have one of the following formats:

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

or

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

or

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

That is, the value of tranform-origin can 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 a single value is allowed, which will be applied to all the transformations indicated in transform .

answered by 19.03.2016 в 21:42

Algebraic Sum of 2 Select SQL Server 2012 When creating a project in Android Studio. Error ... cache.properties (The system can not find the specified file)

score 3 · Accepted Answer

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

You can not, 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>