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.

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…

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.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.