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)
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

Example of transform: perspective(500px) translate(0px, 0px, -300px);   Example of transform: translate(0px, 0px, -300px);
transform: perspective(500px) translate(0px, 0px, -300px);   transform: translate(0px, 0px, -300px);
 
transform: perspective(500px) rotateY(30deg);   Example of transform: rotateY(30deg);
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:

Example of two divs transformed by the same parent perspective property.

#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:

Illustration of the perspective-depth property.

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.

Example of two divs transformed by the same parent perspective-depth property.

#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:

Sequence of 6 cards rotating from front to back.
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); }

}

Early frame from the demo that animates scrolling text with 3D transforms. Later frame from the demo that animates scrolling text with 3D transforms.

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

Comments (30)

  1. Anonymous says:

    That's all very impressive, but when can we try it on Windows 7?

  2. Anonymous says:

    LOL – this stuff wasn't even invented when ie7 shipped. Perhaps the answer you're looking for is chrome-frame 😉

  3. Anonymous says:

    @David,

    Arieta was talking about Windows 7, not Internet Explorer 7. Arieta is, like many others, waiting for a platform preview that runs on Windows 7 rather than just the standard Windows 8 platform preview that we have been told to use.

  4. Anonymous says:

    A 3D rotating video (uses the WebKit prefixes so you'll need Chrome):

    dev.rgraph.net/…/video.html

  5. Anonymous says:

    @David Wilhelm – they are likely going to add Windows 7 support right after they add their missing classList implementation: caniuse.com

  6. Anonymous says:

    "CSS3 3D Transforms add another dimension (literally) for developers to enhance their sites."

    No… "figuratively" (or maybe "virtually"). "Literally" would be if the 3D transform made the screen from a 2D presentation into a 3D environment – and I'm pretty sure that whatever you do to IE, you ain't going to make it do that.

  7. ieblog says:

    Post deleted due to profane content.

  8. Anonymous says:

    How do i detect css3D support in IE? Do you support the transform-3d media query?

  9. Anonymous says:

    Just wondering how the 3d would look on a web browser on a 3d TV.

  10. Anonymous says:

    @Peter 3dish

  11. Anonymous says:

    @ieblog – are you sure that post wasn't "deleted due to profound content"?!  Often times raw truths about IE's inabilities and bugs cut right to the bone when MSFT is trying so hard to come out with new features while ignoring the broken platform they are trying to build on top of.

    Unfortunately all developers are aware of IE's fragile past and are not interested in the new stuff until MSFT fixes the fundamentals that are still broken.

  12. This looks like it might get major use in, well, getting content to look even better without resorting to the use of plug-in. I haven't tried out using this (because IE9 still doesn't support 3D transforms, but I don't think that's a show-stopper), but I think when every single browser can do it, well, I bet that its use will rise. That should also make my personal site look a little bit more… well, fun, shall I say?

    Looking forward to further developments, of course 🙂

    @Jim On the other hand, I have been reading the blogs since, like, forever, and there's a huge backlog of comments to read. A lot of them, are… um…

  13. I can see everyone metro-fying their Web apps! Looking forward to playing with this in RTM’s release.

    @Jim If a release or feature bothers someone, the message will never be delivered when using profane language, showing lack of professionalism, or acting like you're "shouting." If anyone was in your face screaming or throwing a temper tantrum, I'm quite sure you would ignore them – it's noise and no one else wants’ to waste time reading noise.

    There are constructive ways to bring legitimate issues and/or concerns to someone's attention and it's unfortunate that IE's blog attracts a quite a bit of this unprofessionalism.

  14. Anonymous says:

    IE rocks

  15. Anonymous says:

    @Turt-turt-turtwig & @nightdev – I'm not disagreeing at all.  I don't think that profanity will help any of the developers/Microsoft resolve issues however I found it odd that I read/(re)-read many of the comments on this page as the "story" developed and I don't recall seeing a single curse word… yet I do seem to recall a comment that shed light on an IE shortcoming… and that comment is now gone.  I could be mistaken, but from what I recall there wasn't any profanity – just naked truth insight.

  16. Anonymous says:

    @Turt-turt-turtwig & @nightdev – I'm not disagreeing at all.  I don't think that profanity will help any of the developers/Microsoft resolve issues however I found it odd that I read/(re)-read many of the comments on this page as the "story" developed and I don't recall seeing a single curse word… yet I do seem to recall a comment that shed light on an IE shortcoming… and that comment is now gone.  I could be mistaken, but from what I recall there wasn't any profanity – just naked truth insight.

    Here's a better idea… filter the comment out… e.g.

    "I think that IE should support the {{***Moderated***}} CSS Ultra-box feature"

    This way the 80-95% of the comment that was useful does get published and other readers can benefit from it.

  17. OK, back to the topic of 3D Transforms: I think that the quality of 3D transform can vary widely, even if supported, depending on the layout engine. Usually the difference is very slight, it's almost negligible. One thing obvious from Gecko's implementation is that if the transformed surface has unantialiased edges.

    Someday, I need to try out IE10 and see how it renders.

  18. Anonymous says:

    it is a very nice programe

  19. Anonymous says:

    How about WebGL support? Are you guys working on it?

    You could at least use a DirectX implementation but keep the WebGL syntax you know.

  20. I don't think WebGL support is coming anytime soon to IE in any form. Do you trust your graphics driver to behave all the time?

  21. Anonymous says:

    Tried some of the examples like http://www.eleqtriq.com/…/understanding-css-3d-transforms which work perfectly on Safari and Chrome but as usual MS stuff up again – you are so hopeless!

  22. Anonymous says:

    Turt-turt I trust it just as much with WebGL as I did with Silverlight. Silver what? Silver gonnnnnne.

  23. Anonymous says:

    None of the 3D transforms work on IE 10 it's just hopeless can MS just get out of the browser market altogether and leave it to those who don't lie and rubbish everything.

  24. Anonymous says:

    @Mark Lyons:

    They're using vendor-prefixed versions, can't work on anything else then (apparently) webkit-based browsers.

    If you want to see 3d transforms, you need to unprefix…

    Author's fault, not Microsoft's

  25. Anonymous says:

    hey i was just wondering that why my website http://www.mysirf.com is experiencing loading problems on IE… can anyone help please?

  26. Anonymous says:

    yeah. IE10 is showing some real deal, who would have a problem with it? Some Google fanboy or FF hound? Respect each other’s community so the lot can experience variety in technology. Curse others and it will come back right on your face.

    PS: Profilers and Trolls both deserve to die like a cur!

  27. Anonymous says:

    @Mark Lyons

    It is in no-one's interest for non-standard -webkit- experiments to circumvent standards work.

    http://www.glazman.org/…/index.php

    Keep the web open .. in the post you cite the -webkit- agenda is clear as day.

  28. Anonymous says:

    When will IE10 be release on OS X?

  29. Anonymous says:

    Probably never. Internet Explorer for Mac was discontinued in 2003.

  30. Anonymous says:

    I'm trying to rotate an image using rotateY(30deg) but it looks like your card images above – no perspective. It just shrinks on the X axis and that's it. I was hoping you'll explain why your cards above experience the same problem, while your StarWars text looks fine, with perspective and everything. Shouldn't rotate3D automatically apply some perspective? I set perspective to 500px, but it didn't help. The image still looks flat.