IT:AD:CSS/Transforms/Rotations

(UP)
- IT:AD:CSS/Transforms/Rotations
- IT:AD:CSS/Transforms/Scale

Summary

Probably the simplest transformation one can apply to an object.

The basis syntax is:

//rotation in one axis or another:
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle);

The most common being the shorthand equivalent of rotateZ(angle):

transform: rotate(angle);

You can even do a rotation in 3 axes at the same time:

//Defines a 3D rotation	(available in IE10+, C,O,FF)
transform: rotate3d(x,y,z,angle);

Add the -webkit-, -moz-, -ms- and -o- prefixes to account for different browsers.

Like all transform:... statements, keep in mind the that the transform is applied relative to the transform-origin:

  transform-origin: 50% 50%;

An example would be:

.rotated35 {
  transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -o-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
}

Note that the -moz-/-ms-/-o-/-webkit- prefixes always make it look more verbose and complicated than it really is (it's only one css attribute).

If you change the origin of the transformation:

.origin_0_0 {
  transform-origin:0% 0%;
  -moz-...-ms-...-o-...-webkit-...;
}
.origin_50_50 {
  transform-origin:;
  -moz-...-ms-...-o-...-webkit-...;
}
.origin_100_100 {
  transform-origin: 100% 100%;
  -moz-...-ms-...-o-...-webkit-...;
}

The following shows 3 rotations, one round each axis:

.rotated35_X{
  tranform: rotateX(35deg);
  -moz-...-ms-...-o-...-webkit-...;
}
.rotated35_Y{
  tranform: rotateY(35deg);
  -moz-...-ms-...-o-...-webkit-...;
}
.rotated35_Z{
  tranform: rotateZ(35deg);
  -moz-...-ms-...-o-...-webkit-...;
}

The reason the first one looks 'short', is because the square is being rotated around an invisible central line going from left to right.

The same concept applies to the second square, which looks 'narrow', although in this case the square has been rotated around an invisible central line hung done the middle of the square (the Y Axis).

To add some animation, we add transition to the mix.

.swing{
  transition-property: background, transform;
  -moz-ms-o-webkite....
  transition-duration:1s;
  -moz-ms-o-webkite....
  transition-timing-function: linear, ease-in;
  -moz-ms-o-webkite....

  background:orange;
}

.swing:hover {
  transform: rotateY(180deg);
  -moz-ms-o-webkite....
  background:blue;
}

Albeit it's a bit flaky (notice how in Chrome, that coming up to the right of the box doesn't trigger the transition).

Another – better – way of doing animations (although not available prior to IE10) is to use the animation attribute.

@keyframes swing2 {
   from { 
     transform: rotateY(0deg); 
     -webkit-transform: rotateY(0deg); 
   }
   to   { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
   }
}
@-webkit-keyframes swing2 {
   from { 
     transform: rotateY(0deg); 
     -webkit-transform: rotateY(0deg); 
   }
   to   { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
   }
}


.swing2{
  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

.swing2:hover {
   animation-name: swing2;
  -moz-ms-o-webkite....
   animation-duration: 1s;
  -moz-ms-o-webkite....
   animation-timing-function: linear; /* For a steady rate loop */
  -moz-ms-o-webkite....
   animation-delay: 0s;            
  -moz-ms-o-webkite....
   animation-iteration-count: 1; /* Use actual numbers for limited repeat */
  -moz-ms-o-webkite....

   background-color:green;
}

Note how the animation is not persisted, as the element that was being hovered over has been moved out from under the mouse… Needs love.