2 Dimensional Transforms
There are several 2 dimensional transform methods built into CSS
- translate(), translateX(), translateY() moves and item on the X and/or Y axis
- rotate() rotates an item by a certain number of degrees
- scale(), scaleX(), scaleY() scales items on either axis or both.
- skew(), skewX(), skewY() skews items on either axis or both.
- matrix() combines all of these properties.
View the MDN page on CSS Transforms for specifics on syntax and some demos. Be sure to note the accessibility concerns, and that for some users scaling and zooming animations may cause migraines.
Example 1: Rotate
Example 2: Scale and Translate
Notice that unlike transtioning the size property, transtioning the transform property does not affect the position of other elements on the page. It is not pushing this paragraph down, for example.
Example 3: Matrix
Note that to get the numbers for the matrix, I used this tool. I put an exclaimation point in here so that you can see that it is actually skewing the content, not just changing the shape of the box.
Example 4: Transform Origin
It is occasionaly useful to set the origin point for the transform. See this page on the MDN for a few more demos.
3 Dimensional Transformations
The 3d transforms make use of the z axis and the perspective and perspective-origin properties.
Example 5: Perspective from the Parent
Notice that when the perspective is on the parent, the parent creates one vanishing point, which is determined by the perspective-origin. Try changing the perspective-origin to 'top left' and then to 'bottom right' to see some differences.
Example 6: Perspective Transform on the Child
Notice the difference here. The perspective transform is set on the child items, so they are all seen from their own vanishing points. Also note that the number used for the distance in the perspective determines how far away from the z-axis the viewer is. Try changing the perspective in the hover rule to 100px, or 10px or 1px.
Perspective in CSS can be somewhat difficult to wrap your head around, but there are lots of great articles and examples around the web, including this one from CSS Tricks. Also, there are some great demos on how to do things like flip cards or make a cube with CSS, like this example. Perspective in CSS is often used in combination with translateZ and scale to create CSS parallax effects, as demonstrated here.