Two Dimensional Transforms

Two Dimensional Transforms

Two Dimensional Transforms

CSS3 gives us 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:

2D Transform Methods
Method Example
translate translate(10px, -20px) moves the element 10 pixels left and 20 pixels up from its original position; can use translateX or translateY 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 use scaleX or scaleY 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 use skewX or skewY 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 for more description of using the matrix function (but be sure to dig up a linear algebra textbook for reference!)

Browser support for transforms is catching up; newer versions of desktop and mobile browser support the property well. Vendor prefixes are recommended - we won't show the prefixes when discussing syntax but will use as appropriate in demos and exercises. Internet Explorer supports transform from version 9 (with -ms- prefix) and without the prefix in version 10.

We'll examine each of the various transform methods in the next example.

Code Sample:

TransformsTransitions/Demos/transforms.html
```<!DOCTYPE html>
<html>
<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;
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;
}
#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>
<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>
```

Open ClassFiles/TransformsTransitions/Demos/transforms.html in a code editor to view the code, and in a browser to view the result.

The page displays five `<div>`s, each labeled with a `transform` method and containing a small, darker `<div>`. When moused over, each of the small dark elements displays its respective `transform` method. The screenshot below shows at top the original state of each element; at bottom is the result of each upon application of its respective `transform` 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.

We use `transform: scale(2.5, 3);` to stretch 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.

By default, the origin - the reference point for translations, rotations, scalings, and skewings - is the center of the element. We can change that via the transform-origin property. The property accepts values for the x-axis and y-axis of the origin, respectively, in percentage, absolute length, or keyword forms. Here are some examples:

• transform-origin: 20% 50%
• transform-origin: left top (possible x values are left, center, right; possible y values are top, center, bottom)
• transform-origin: 10px 50px

In our work so far, we have only looked at two-dimensional transforms. CSS3 also gives us the power to transform elements in three dimensions, too, but those transforms are beyond the scope of this course.