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.

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: 0px0px;

transform: rotateY(30deg);

}

#div2 {

position: absolute;

transform-origin: 0px0px;

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: -300px0px;

}

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, .carddiv {

position: absolute;

width: 102px;

height: 143px;

}

.carddiv:nth-child(1) {

background-image: url('redback.png');

}

.carddiv:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

HTML markup for one card:

<divclass="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.