Clean • Professional
3D transforms extend CSS 2D transformations into three dimensions, enabling elements to appear closer or farther away and rotate along multiple axes.
Common 3D transform functions:
perspective() – sets the distance between the viewer and the object.rotate3d() – rotates an element in 3D space along X, Y, and Z axes.translateZ(), scaleZ(), and rotateX()/rotateY()/rotateZ().The perspective() property determines how far an object is from the viewer, simulating depth.
Syntax:
transform: perspective(value) rotateX(angle) rotateY(angle);
Example:
The .perspective-container sets a depth of 600px, making the box appear 3D when rotated along X and Y axes. Hovering returns it to the flat position.
<div class="perspective-container">
<div class="box perspective-box">3D Perspective</div>
</div>
.perspective-container {
perspective: 600px; /* How far the viewer is */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f1f2f6;
}
.perspective-box {
width: 150px;
height: 150px;
background-color: #ff6b6b;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
border-radius: 10px;
transform: rotateX(30deg) rotateY(30deg);
transition: transform 0.4s ease;
}
.perspective-box:hover {
transform: rotateX(0deg) rotateY(0deg);
cursor: pointer;
}
Output :
The rotate3d() function allows rotation along any combination of X, Y, and Z axes.
Syntax:
x → 1 to rotate along X-axis (0 = no rotation)y → 1 to rotate along Y-axisz → 1 to rotate along Z-axisangle → rotation in degreestransform: rotate3d(x, y, z, angle);
Example:
<div class="box rotate3d-box">3D Rotate</div>
.rotate3d-box {
width: 150px;
height: 150px;
background-color: #1dd1a1;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
border-radius: 10px;
transform: rotate3d(1, 1, 0, 45deg); /* Rotate diagonally in 3D */
transition: transform 0.4s ease;
}
.rotate3d-box:hover {
transform: rotate3d(0, 0, 1, 360deg); /* Spin on Z-axis on hover */
}
Output :
You can combine perspective and rotate3d to create interactive 3D cards.
.card-container provides the 3D perspective..card rotates along multiple axes, flipping and changing color when hovered.<div class="card-container">
<div class="card">Hover Me</div>
</div>
.card-container {
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f1f2f6;
}
.card {
width: 200px;
height: 200px;
background-color: #54a0ff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 15px;
transform: rotate3d(0.5, 1, 0, 20deg);
transition: transform 0.5s ease, background-color 0.3s ease;
}
.card:hover {
transform: rotate3d(0, 1, 0, 180deg); /* Flip along Y-axis */
background-color: #5f27cd;
cursor: pointer;
}
Output :
