HTML and CSS Reference
In-Depth Information
2D transforms
To demonstrate CSS 2D transforms, we'll use this simple page with
three similar elements:
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);
Search WWH ::

Custom Search