The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern


Last updated on:

The transform-style property, when applied to an element, determines if that element's children are positioned in 3D space, or flattened.

.parent {
    transform-style: preserve-3d;

It accepts one of two values: flat (the default) and preserve-3d. To demonstrate the difference between the two values, click the toggle button in the CodePen below:

Check out this Pen!

When the button is clicked, the demo uses JavaScript to toggle the transform-style value between preserve-3d and flat.

As you can see, when the value is changed to flat, the child elements are no longer stacked according the the translateZ values (in 3D space), but instead flatten out to appear the way elements are by default on an HTML page.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
12+ 4+ 10+ 15+ None 3.0+ 3.2+

All browsers require vendor prefixes, except Firefox 16+. Opera uses -webkit- as of version 15 and the Blink conversion.

IE10 supports 3D transforms, but does not support the transform-style property.


  1. Sander
    Permalink to comment#

    Opera supports transform-style since version 15.

    • Chris Coyier
      Permalink to comment#

      Thanks I updated that. Looks like it’s supported post-Blink-transition.

  2. Goon
    Permalink to comment#

    IE is the worst browser in the world. I wish Microsoft to buy Mozilla or at least Opera.. So IE can finally rest in peace… Damn…

    • Eddie Prislac
      Permalink to comment#

      Too right. How can a company with all of Microsoft’s resources lag so far behind every other browser in terms of feature adoption?

    • Kevin
      Permalink to comment#

      I think it’s by design. From what I have observed with Microsoft, I think the problem is that they have too many resources in the area of browser development. They innovated plenty in the early IE stages (including the invention of AJAX) but got too much into their own “standards” in later releases. That unconventional progress became the snake that ate it’s own tail. Now we just have crap. Thanks Microsoft…

    • John
      Permalink to comment#

      I dislike IE as well however the Spartan looks like it could have potential. So at least they may have a fair chance :P

    • Brandon Paddock
      Permalink to comment#

      IE is actually a fantastic browser these days. It leads the way in a lot of areas (first to implement CSS grid, pointer events, scroll rails and snap points, independent animations, independent input, and more). But just like Chrome is way behind in several of those areas, IE is behind on a few others, like preserve-3d which is only in the dev channel / tech preview release currently. It also had Chrome way beat with unprefixed standard-compliant CSS transforms, transitions, and animations.

      Thing is, if you only use Chrome, you assume its particular selection of features is the standard. But that’s a very narrow perspective.

  3. Vasiliy

    Internet Explorer supports transform-style since version 11

  4. mrnobody
    Permalink to comment#

    Not perspective: 600; and perspective: 600px;

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed