Transform-Style in CSS
In my last article, we understood how transform-origin works. This week I explored more properties related to the transform property in CSS. So, I stumbled upon thetransform-style property. And it’s pretty useful while making 3d transformations.
What’s transform-style
transform-style is complimentary property to thetransform property in CSS. It has two options, transform-style:flat (which is the default) and transform-style:preserve-3d Basically, this property allows the child elements to retain their transform effects when their parents have any 3d transform effect like rotateY applied to them.
Let’s understand with this example. Let’s say div#parent has a child element div#child now the parent element has a transform:rotateY(235deg) property applied, which gives out div#parent element a 3d effect. But, now if we were to give it’s div#child element any property, say transfor:translateX(100px) the child would display this effect in a flattened manner. That is, it won’t be 3d. To solve this, we can use thetransform-style:preserve-3d property. For illustrative purposes, I’ve made a pen below, with a JS button toggle. Allowing you to view both the transform-style:flat and transform-style:preserve-3d properties in action.
That’s all folks
I actually learned about this property a while back, and have used it here and there in the past. Hope it also helps you in your web projects.
