CSS - transform-style Property
The CSS property transform-style determines whether an element's children are placed in a three-dimensional space or are flattened in the element's plane.
When flattened, the children of the element will not appear on their own in the three-dimensional space.
Since this property is not inherited, it should be set for all the non-leaf descendants of the specified element.
Possible values
The CSS property transform-style can have one of the following values:
flat: Specifies that the element's children are placed in the element's plane. It is the default value.
preserve-3d: Specifies that the element's children are placed in the three-dimensional space.
Applies to
All the transformable elements.
Syntax
transform-style = flat | preserve-3d
CSS transform-style - flat Value
Following example demonstrates the use of transform-style: flat used along-side transform function:
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: flat; transform: rotate(30deg); margin-bottom: 80px; padding: 30px; } .face { position: absolute; width: 100px; height: 100px; border: 1px solid black; line-height: 80px; font-size: 3.5em; color: white; text-align: center; } .front { background: rgba(100, 0, 100, 0.2); transform: translateZ(50px); } .back { background: rgba(178, 178, 0, 0.5); color: black; transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(0, 0, 178, 0.5); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(178, 0, 0, 0.5); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(0, 200, 0); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(0, 0, 0, 0.2); transform: rotateX(-90deg) translateZ(50px); } </style> </head> <body> <div class="container"> <div class="cube"> <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> </div> </div> </body> </html>
CSS transform-style - preserve-3d Value
Following example demonstrates the use of transform-style: preserve-3d used along-side transform function:
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); margin-bottom: 80px; padding: 30px; } .face { position: absolute; width: 100px; height: 100px; border: 1px solid black; line-height: 80px; font-size: 3.5em; color: white; text-align: center; } .front { background: rgba(100, 0, 100, 0.2); transform: translateZ(50px); } .back { background: rgba(178, 178, 0, 0.5); color: black; transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(0, 0, 178, 0.5); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(178, 0, 0, 0.5); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(0, 200, 0); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(0, 0, 0, 0.2); transform: rotateX(-90deg) translateZ(50px); } </style> </head> <body> <div class="container"> <div class="cube"> <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> </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google