How to Use CSS 2-D Transforms
In CSS3, you can use the transform
property, which allows us to easily position, stretch, scale, and rotate elements.
- Here's a list of the valid values (functions) for the
transform
property:Method Example translate translate(10px, -20px)
moves the element 10 pixels left and 20 pixels up from its original position; can usetranslateX
ortranslateY
for horizontal or vertical positioning.rotate rotate(20deg)
rotates the element 20 degrees clockwise; negative values rotate counter-clockwise.scale scale(2,3.5)
stretches the element to be twice as wide and 3.5 times as tall; can also usescaleX
orscaleY
to specify horizontal or vertical scaling.skew< skew(10deg, 20deg)
turns the element 10 degrees about the X axis and 20 degrees about the Y axis; can also useskewX
orskewY
to control X- and Y-axis skew.matrix matrix(0.75,0.5,-0.5,1.5,20,0)
allows us to specify all of the above methods at once according to a square matrix. See the W3C website (http://www.w3.org/TR/css3-transforms/) for more description of using thematrix
function (but be sure to dig up a linear algebra textbook for reference). - Let's look at an example that illustrates the use of the
transform
property:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 2D Transforms</title> <style type="text/css"> div.example { width: 140px; height: 200px; background-color: hsl(0, 20%, 70%); margin: 0 5px 20px 0; padding: 3px 10px; text-align: center; float: left; } div.example div { width: 50px; height: 50px; background-color: hsl(0, 20%, 20%); } div.example code { display: block; font-size: 0.8em; padding: 10px; } #translate:hover div { -webkit-transform: translate(50px, 100px); -moz-transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); -o-transform: translate(50px, 100px); transform: translate(50px, 100px); } #rotate:hover div { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } #scale:hover div { -webkit-transform: scale(2.5, 3); -moz-transform: scale(2.5, 3); -ms-transform: scale(2.5, 3); -o-transform: scale(2.5, 3); transform: scale(2.5, 3); } #skew:hover div { -webkit-transform: skew(10deg, 30deg); -moz-transform: skew(10deg, 30deg); -ms-transform: skew(10deg, 30deg); -o-transform: skew(10deg, 30deg); transform: skew(10deg, 30deg); } #matrix:hover div { -webkit-transform: matrix(0.75,0.5,-0.5,1.5,20,0); -moz-transform: matrix(0.75,0.5,-0.5,1.5,20,0); -ms-transform: matrix(0.75,0.5,-0.5,1.5,20,0); -o-transform: matrix(0.75,0.5,-0.5,1.5,20,0); transform: matrix(0.75,0.5,-0.5,1.5,20,0); } </style> </head> <body> <div id="main"> <h1>CSS3 2D Transforms</h1> <div class="example" id="translate"><code>translate()</code><div></div></div> <div class="example" id="rotate"><code>rotate()</code><div></div></div> <div class="example" id="scale"><code>scale()</code><div></div></div> <div class="example" id="skew"><code>skew()</code><div></div></div> <div class="example" id="matrix"><code>matrix()</code><div></div></div> </div> </body> </html>
The page displays five
<div>
s, each labeled with atransform
method and containing a small, darker<div>
. - When moused over, each of the small dark elements displays its respective
transform
method. This screenshot shows the result of each element upon application of its respectivetransform
method: - In the first element,
transform: translate(50px, 100px);
pushes the small box 50 pixels right and 100 pixels down from its original position. - In the second element,
transform: rotate(20deg);
rotates the small box 20 degrees clockwise. transform: scale(2.5, 3);
stretches the third box 2.5 times wider and three times taller.- In the fourth example, we skew the small box 10 degrees about the X-axis and 30 degrees about the Y-axis with
transform: skew(10deg, 30deg);
. - We combine all of the transforms with
transform: matrix(0.75,0.5,-0.5,1.5,20,0);
in the final example.