HTML and CSS Reference
In-Depth Information
2D transforms
To demonstrate
CSS 2D
transforms, we'll use this simple page with
three similar elements:
<body>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
Here's the basic
CSS
:
div {
display: inline-block;
padding: 1em;
margin: 1em;
background-color: #666;
color: #fff;
}
This example picks out the second
element and scales it to 150% of its
initial size:
div:nth-child(2) {
transform: scale(1.5);
}
All the examples in this section will need vendor prefixes applied if you
want to try them in current browsers. Add
-webkit-
,
-moz-
,
-o-
, or
-ms-
to
the front of the transform properties (not the values) for support in
Safari/Chrome, Firefox, Opera, and IE9, respectively. See the section
''Browser supporT'' at the end of this chapter for further details.
By default, transformed elements
keep their center point in the same
place. If you scale the third element to
250% of its original size, it partially
covers the second element:
div:nth-child(3) {
transform: scale(2.5);
}
