CSS transform-style property

src

Description

perspective allows an element to render the children elements to rotate in 3D-space.

But what about the chidren of the children elements. Should they preserve the 3D nature or not?: transform-style decides whether this 3D nature should be preserved into the children of the children elements or not.

Syntax

transform-style : flat | preserve-3d

Property values

flatDefault

In this case, all the children elements are flattened into this element's plane on rotation around X, Y axes.

If .element has flat transform-style, the child element (.element1) rotates in 3D-space.

transform-style: flat;

Try it

preserve-3d

All the children elements are not flattened into this element's plane but rather they rotate in 3D-space on rotation around X, Y axes.

If .element has preserve-3d transform-style, the child element (.element1) rotates in 3D-space.

transform-style: preserve-3d;

Try it

Applicable to

It applies to all elements

Preview

Code

CSS

.parent{
perspective:300px;	
 width:100px;
 height:100px;
 background-color:red;
}
.element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateY(50deg);
}
.element1{
 width:100px;
 height:100px;
 background-color:lightgreen;
 transition: transform 3s;
 transform:rotateX(30deg);
}

HTML

<div class="parent">
<div class="element">
<div class="element1">
   hover over me to see the effect of transform-style.
  </div>
</div>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to