Core Code
Core Code Modern Dev Handbook

Preserve 3D

transform-style: preserve-3d keeps child elements in 3D space.

Preview

Code

<style>
.container{
perspective:500px;
}

.box{
width:120px;
height:80px;
background:#06b6d4;
transform-style:preserve-3d;
transform:rotateY(30deg);
}
</style>

<div class="container">
<div class="box"></div>
</div>

More CSS 3D Transforms Examples (8)

example RotateX Transform open example example RotateY Transform open example example RotateZ Transform open example example Perspective Example open example example 3D Hover Card open example example TranslateZ Transform open example example Simple 3D Cube Face open example example 3D Button Press Effect open example