CSS3 3D Transforms in IE10
CSS3 features make it easier to build rich and immersive Web experiences. A recent post described how Web developers add personality to their sites with CSS3 Transitions and Animations. CSS3 3D Transforms add another dimension (literally) for developers to enhance their sites. For example, the Windows 8 Metro style Start page uses subtle 3D transforms to highlight pressed tiles, as shown below.
Internet Explorer 10 tile shown not pressed (left) and pressed (right)
Adding a 3rd Dimension to CSS Transforms
Like CSS3 2D Transforms, 3D Transforms provides functions and values for the CSS transform and transform-origin properties that apply geometric transformations operations to HTML elements. CSS 3D Transforms extends the transforms functions to enable 3D transforms. The rotate(), scale(), translate(), skew(), and matrix() transform functions are expanded to encompass the 3D space with a z-coordinate parameter—or in the case of matrix3d(), an extra 10 parameters—and by spawning additional transform functions, for example, rotateZ() and scaleZ().
A new perspective transform function gives transformed elements depth by making distant points appear smaller.
CSS3 3D Transforms also adds a few new CSS properties. In addition to the transform and transform-origin properties, IE10 supports vendor-prefixed perspective, perspective-origin, backface-visibility, and the flat value of transform-style.
Note: The markup examples in this post all use unprefixed properties as defined in the W3C standard. However, at this time all browsers that implement these features do so with vendor-specific prefixes. Please remember to add your browser’s prefix to the example markup when experimenting.
Perspective
The perspective transform function is important for 3D transforms. It sets the viewer’s position and maps the viewable content onto a viewing pyramid, which it subsequently projects onto a 2D viewing plane. Without specifying perspective, all points in z-space are flattened onto the same 2D plane and there is no perception of depth in the resulting transform. For some transforms, such as the translation along the Z-axis shown below, the perspective transform function is essential for visibly seeing any effect from the transform.
In the examples below is the original, untransformed element and is the transformed element
transform: perspective(500px) translate(0px, 0px, -300px); |
transform: translate(0px, 0px, -300px); |
|
transform: perspective(500px) rotateY(30deg); |
transform: rotateY(30deg); |
|
A shortcut for adding the perspective transform to several elements is to use the perspective property on their parent element(s). The perspective property applies the perspective transform to each of its child elements:
#parent {
perspective: 500px;
}
#div1 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg);
}
#div2 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg) translate(220px);
}
The perspective-origin property can also be used in conjunction with perspective to shift the viewpoint away from the center of the element:
Below, you can see that shifting the perspective origin to the left makes the content to the right of the original perspective origin appear farther away.
#parent {
perspective: 500px;
perspective-origin: -300px 0px;
}
backface-visibility
The backface-visibility property is useful for hiding the backface of content. By default, the backface is visible and the transformed content can be seen even when flipped. But when backface-visibility is set to hidden, content is hidden when the element is rotated such that the front side is no longer visible. This can be useful if you want to simulate an object with multiple sides, such as the card used in the example below. By setting backface-visibility to hidden, it’s easy to ensure that only the front-facing sides are visible.
CSS markup:
.card, .card div {
position: absolute;
width: 102px;
height: 143px;
}
.card div:nth-child(1) {
background-image: url('redback.png');
}
.card div:nth-child(2) {
background-image: url('8clubs.png');
backface-visibility: hidden;
}
HTML markup for one card:
<div class="card"><div></div><div></div></div>
Creating six cards as defined above and giving each a style="transform: rotateY(ndeg)" property with a different rotation value n, results in this:
| rotateY(0deg); | rotateY(36deg); | rotateY(72deg); | rotateY(108deg); | rotateY(144deg); | rotateY(180deg); |
What’s happening in this example is that when there’s no rotation, you see the second div, the 8 of clubs—because it’s the one on top in drawing order. As we apply a rotation to the card and pass 90 degrees, the backface-visibility: hidden; property of the second div causes it to become invisible thereby exposing the first div, the card back.
3D Transforms with Animations and Transitions
Best of all, you can even use 3D transforms in conjunction with CSS transitions and animations. If you are using IE10 or another browser that supports CSS3 Animations of CSS3 3D Transforms, try this example of scrolling text, built by animating the transform property.
This is the CSS markup that achieves the effect shown in screen shots below.
#parentDiv {
perspective: 500px;
perspective-origin: 150px 500px;
}
#div1 {
transform-origin: 150px 500px;
animation: scrollText 200s linear infinite;
}
@keyframes scrollText {
0% { transform: rotateX(45deg) translateY(500px); }
100% { transform: rotateX(45deg) translateY(-8300px); }
}
Try It Today
Try this out in IE10 on the Windows Developer Preview. The test drive demo Hands On: 3D Transforms can help visualize the possibilities that CSS 3D Transforms enables.
We’d love to see your creations!
—Jennifer Yu, Program Manager, Internet Explorer Graphics