CssHow-ToBeginner · 3 min read

How to Use 3D Transform in CSS: Simple Guide with Examples

Use the transform property with 3D functions like rotateX(), rotateY(), translateZ(), and perspective() to create 3D effects in CSS. Combine these with transform-style: preserve-3d; and set a perspective on the parent to see the depth effect.

📐

Syntax

The main CSS property for 3D transforms is transform. You can use functions like:

rotateX(angle) - rotates the element around the horizontal axis.
rotateY(angle) - rotates the element around the vertical axis.
translateZ(length) - moves the element closer or farther along the z-axis (depth).
perspective(length) - defines the distance between the viewer and the z=0 plane, creating depth.

To keep child elements in 3D space, use transform-style: preserve-3d; on the parent.

css

/* Basic 3D transform syntax */
.element {
  perspective: 600px; /* sets depth for children */
}
.child {
  transform-style: preserve-3d; /* keeps 3D effect for children */
  transform: rotateY(45deg) translateZ(50px);
}

💻

Example

This example shows a square rotated in 3D space around the Y-axis with perspective, so it looks like it is turning in depth.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>3D Transform Example</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f0f0;
    margin: 0;
  }
  .container {
    perspective: 600px;
  }
  .box {
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #4a90e2, #9013fe);
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 12px;
    transform-style: preserve-3d;
    transform: rotateY(45deg);
    transition: transform 0.5s ease;
    cursor: pointer;
  }
  .box:hover {
    transform: rotateY(135deg) translateZ(30px);
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">3D Box</div>
  </div>
</body>
</html>

Output

A centered square box with a blue-purple gradient that is rotated 45 degrees around the vertical axis. On hover, it rotates further and moves slightly forward, creating a 3D turning effect.

⚠️

Common Pitfalls

Not setting perspective on a parent container means 3D effects won't show depth and look flat.
Forgetting transform-style: preserve-3d; on the element with children breaks nested 3D transforms.
Using translateZ() without perspective makes the movement along the z-axis invisible.
Overusing large perspective values can make 3D effects too subtle or too extreme.

css

/* Wrong: No perspective set, 3D rotation looks flat */
.container {
  /* perspective missing */
}
.box {
  transform: rotateY(45deg);
}

/* Right: Perspective added for depth */
.container {
  perspective: 600px;
}
.box {
  transform: rotateY(45deg);
}

📊

Quick Reference

Property/Function	Description	Example
perspective	Sets viewer distance for 3D depth	perspective: 800px;
transform-style	Keeps children in 3D space	transform-style: preserve-3d;
rotateX(angle)	Rotate around horizontal axis	transform: rotateX(30deg);
rotateY(angle)	Rotate around vertical axis	transform: rotateY(45deg);
translateZ(length)	Move element forward/backward	transform: translateZ(50px);
scaleZ(factor)	Scale element along z-axis	transform: scaleZ(1.5);

✅

Key Takeaways

Always set perspective on a parent container to see 3D depth.

Use transform-style: preserve-3d to maintain 3D effects on child elements.

Combine rotateX, rotateY, and translateZ for rich 3D transformations.

Test with moderate perspective values to avoid extreme distortion.

Hover or animation can enhance 3D transform effects for better user experience.