CSS transform-style

The CSS transform-style property is used set whether the child elements are positioned in 3D space or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #x{position: relative; width: 220px; height: 220px; color: white;}
      #b, #y{position: absolute; background-color: chocolate; padding: 60px;}
      #c, #z{position: absolute; background-color: green; transform: rotateY(10deg); padding: 40px 66px;}
      
      #b{transform-style: preserve-3d;}
      #y{transform-style: flat;}
</style>
</head>
<body>
   
   <div id="a">
      <div id="b">DIV (b)
         <div id="c">DIV (c)</div>
      </div>
   </div>
   
   <div id="x">
      <div id="y">DIV (y)
         <div id="z">DIV (z)</div>
      </div>
   </div>

</body>
</html>

Output

DIV (b)

DIV (c)

DIV (y)

DIV (z)

The transform-style property is applied to DIV whose ID is b and y, therefore the child element of b (the DIV whose ID is c) and y (the DIV whose ID is z) will get effected.

Note - The transform-style property comes with the transform property.

Note - The rotateY() function rotates an element along y-axis.

CSS transform-style Syntax

The syntax of transform-style property in CSS, is:

transform-style: x;

The value of x should be any of the following:

preserve-3d - used to position child elements in 3D space
flat - used not to position child elements in 3D space. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS transform-style Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a{margin: 56px 0; width: 200px; height: 80px; background-color: chocolate;
         transform-style: preserve-3d; color: white;}
      #b{padding: 20px; transform: rotate3d(1, 1.3, 1.2, 70deg); background-color: green;}
   </style>
</head>
<body>
   
   <div id="a">DIV (a)
      <div id="b">DIV (b)
      </div>
   </div>

</body>
</html>

Output

DIV (a)

DIV (b)

If we remove the following CSS code, from above example:

transform-style: preserve-3d;

Or replace with the code given below:

transform-style: flat;

Then the output will be:

DIV (a)

DIV (b)

CSS Online Test

« Previous Tutorial Next Tutorial »