transform-style
Quick Summary for transform-style
The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.
Code Usage for transform-style
/* Keyword values */ transform-style: flat; transform-style: preserve-3d;  /* Global values */ transform-style: inherit; transform-style: initial; transform-style: revert; transform-style: unset; 
More Details for transform-style

transform-style

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

If flattened, the element's children will not exist on their own in the 3D-space.

As this property is not inherited, it must be set for all non-leaf descendants of the element.

Syntax

/* Keyword values */ transform-style: flat; transform-style: preserve-3d;  /* Global values */ transform-style: inherit; transform-style: initial; transform-style: revert; transform-style: unset; 

Values

flat

Indicates that the children of the element are lying in the plane of the element itself.

preserve-3d

Indicates that the children of the element should be positioned in the 3D-space.

Formal definition

Initial valueflat
Applies totransformable elements
Inheritedno
Computed valueas specified
Animation typediscrete
Creates stacking contextyes

Formal syntax

flat | preserve-3d

Examples

Transform style demonstration

In this example we have a 3D cube created using transforms. The parent container of the cube faces has transform-style: preserve-3d set on it by default, so it is transformed in the 3D space and you can see it as intended.

We also provide a checkbox allowing you to toggle between this, and transform-style: flat. In this alternative state, the cube faces are all flattened onto the plane of their parent, and you might not be able to see them at all, depending on the browser you are using.

HTML
<section id="example-element">   <div class="face front">1</div>   <div class="face back">2</div>   <div class="face right">3</div>   <div class="face left">4</div>   <div class="face top">5</div>   <div class="face bottom">6</div> </section>  <div class="checkbox">   <label for="preserve"><code>preserve-3d</code></label>   <input type="checkbox" id="preserve" checked> </div> 
CSS
#example-element {   margin: 50px;   width: 100px;   height: 100px;   transform-style: preserve-3d;   transform: rotate3d(1, 1, 1, 30deg); }  .face {   display: flex;   align-items: center;   justify-content: center;   width: 100%;   height: 100%;   position: absolute;   backface-visibility: inherit;   font-size: 60px;   color: #fff; }  .front {     background: rgba(90,90,90,.7);     transform: translateZ(50px); }  .back {     background: rgba(0,210,0,.7);     transform: rotateY(180deg) translateZ(50px); }  .right {   background: rgba(210,0,0,.7);   transform: rotateY(90deg) translateZ(50px); }  .left {   background: rgba(0,0,210,.7);   transform: rotateY(-90deg) translateZ(50px); }  .top {   background: rgba(210,210,0,.7);   transform: rotateX(90deg) translateZ(50px); }  .bottom {   background: rgba(210,0,210,.7);   transform: rotateX(-90deg) translateZ(50px); } 
JavaScript
const cube = document.getElementById('example-element'); const checkbox = document.getElementById('preserve');  checkbox.addEventListener('change', () => {   if(checkbox.checked) {     cube.style.transformStyle = 'preserve-3d';   } else {     cube.style.transformStyle = 'flat';   } }) 
Result

Specifications

Specification
CSS Transforms Module Level 2 # transform-style-property

See also

Using CSS transforms

Last modified: Oct 3, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown
Random CSS Property

pad

The pad descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum length.
pad (@counter-style) css reference