Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate and translate

I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if I disable the positioning.

CSS:

#rotatedtext {     transform-origin: left;     transform: rotate(90deg);     transform: translate(50%, 50%); } 

The html is just plain text.

like image 782
Sera Avatar asked May 28 '13 15:05

Sera


People also ask

How do you use translate and rotate together?

The order is right to left, not left to right. transformation: translate(0,10%) rotate(25deg); The rotate operation is done first, then the translate .

Does rotation affect translation?

Basics of Transformations You are affecting its coordinate system. So a rotation rotates the x and y axes. If you have a transform that rotates 45 degrees and then apply a translate 100 pixels to the right, the translation will not go to the true right.

How do you rotate in CSS?

Syntax. The amount of rotation created by rotate() is specified by an <angle> . If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

What is the use of translate in CSS?

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.


2 Answers

The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.

What it is doing is this:

  1. rotate the text 90 degrees. Ok.
  2. translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.

See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten

As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/

To do this you use a space separated list of transforms:

#rotatedtext {     transform-origin: left;     transform: translate(50%, 50%) rotate(90deg) ; } 

Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.

like image 175
David Storey Avatar answered Sep 22 '22 05:09

David Storey


Be careful on the "order of execution" in CSS3 chains! The order is right to left, not left to right.

transformation: translate(0,10%) rotate(25deg); 

The rotate operation is done first, then the translate.

See: CSS3 transform order matters: rightmost operation first

like image 32
darthRodolfo Avatar answered Sep 21 '22 05:09

darthRodolfo