How to apply multiple transforms in CSS

Question

Using CSS  how can I apply more than one transform   Example  In the following  only the translation is applied  not the rotation   li nth-child 2        transform  rotate 15deg       transform  translate -20px 0px

User · Answer

You can apply more than one transform like this   li nth-of-type 2       transform   translate -20px  0px  rotate 15deg

User · Answer

Just start from there that in CSS  if you repeat 2 values or more  always last one gets applied  unless using  important tag  but at the same time avoid using  important as much as you can  so in your case that s the problem  so the second transform override the first one in this case    So how you can do what you want then     Don t worry  transform accepts multiple values at the same time    So this code below will work  li nth-child 2      transform  rotate 15deg  translate -20px  0px     multiple    If you like to play around with transform run the iframe from MDN below   x000D   x000D   lt iframe src  https   interactive-examples mdn mozilla net pages css transform html  class  interactive    width  100   frameborder  0  height  250  gt  lt  iframe gt  x000D   x000D   x000D   Look at the link below for more info   lt  lt  CSS transform  gt  gt

User · Answer

Some time in the future  we can write it like this   li nth-child 2        rotate  15deg      translate -20px 0px              This will become especially useful when applying individual classes on an element    lt div class  teaser important  gt  lt  div gt    teaser rotate 10deg    important scale 1 5 1 5     This syntax is defined in the in-progress CSS Transforms Level 2 specification  but can t find anything about current browser support other then chrome canary  Hope some day i ll come back and update browser support here     Found the info in this article which you might want to check out regarding workarounds for current browsers

User · Answer

You have to put them on one line like this   li nth-child 2        transform  rotate 15deg  translate -20px 0px       When you have multiple transform directives  only the last one will be applied  It s like any other CSS rule     Keep in mind multiple transform one line directives are applied from right to left   This  transform  scale 1 1 5  rotate 90deg   and  transform  rotate 90deg  scale 1 1 5    will not produce the same result    x000D   x000D   orderOne   orderTwo   x000D    font-family  sans-serif  x000D    font-size  22px  x000D    color   000  x000D    display  inline-block  x000D    x000D   x000D   orderOne   x000D    transform  scale 1  1 5  rotate 90deg   x000D    x000D   x000D   orderTwo   x000D    transform  rotate 90deg  scale 1  1 5   x000D    x000D   lt div class  orderOne  gt  x000D    A x000D   lt  div gt  x000D   x000D   lt div class  orderTwo  gt  x000D    A x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Transform Rotate and Translate in single line css -How    x000D   x000D  div className  x000D      transform   rotate 270deg  translate -50   0       x000D      -webkit-transform  rotate 270deg  translate -50   -50        x000D      -moz-transform  rotate 270deg  translate -50   -50        x000D      -ms-transform  rotate 270deg  translate -50   -50        x000D      -o-transform  rotate 270deg  translate -50   -50     x000D      float left  x000D      position absolute  x000D      top 50   x000D      left 50   x000D        x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div class  className  gt  x000D     lt span style  font-size 50px  gt A lt  span gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I m adding this answer not because it s likely to be helpful but just because it s true   In addition to using the existing answers explaining how to make more than one translation by chaining them  you can also construct the 4x4 matrix yourself  I grabbed the following image from some random site I found while googling which shows rotational matrices   Rotation around x axis   Rotation around y axis   Rotation around z axis    I couldn t find a good example of translation  so assuming I remember understand it right  translation    1 0 0 0   0 1 0 0   0 0 1 0   x y z 1    See more at the Wikipedia article on transformation as well as the Pragamatic CSS3 tutorial which explains it rather well  Another guide I found which explains arbitrary rotation matrices is Egon Rath s notes on matrices  Matrix multiplication works between these 4x4 matrices of course  so to perform a rotation followed by a translation  you make the appropriate rotation matrix and multiply it by the translation matrix   This can give you a bit more freedom to get it just right  and will also make it pretty much completely impossible for anyone to understand what it s doing  including you in five minutes   But  you know  it works   Edit  I just realized that I missed mentioning probably the most important and practical use of this  which is to incrementally create complex 3D transformations via JavaScript  where things will make a bit more sense

User · Answer

You can also apply multiple transforms using an extra layer of markup e g     lt h3 class  rotated-heading  gt       lt span class  scaled-up  gt Hey  lt  span gt   lt  h3 gt   lt style type  text css  gt   rotated-heading       transform  rotate 10deg       scaled-up       transform  scale 1 5      lt  style gt    This can be really useful when animating elements with transforms using Javascript

[css] How to apply multiple transforms in CSS?

Examples related to css

Examples related to css-transforms