Transform Origin, 3D Transforms and Perspective
What Is It?
Transform origin controls the pivot. Perspective gives depth to 3D transformations such as rotating a card around its vertical axis.
Properties, Tags and Attributes Explained
transform-origin: Sets the pivot point for transforms.translate / rotate / scale: Individual transform properties that can be set separately.perspective: Sets the viewer distance for transformed 3D descendants.rotateX() / rotateY(): Rotate around horizontal or vertical axes.backface-visibility: Controls whether a transformed back face is visible.transform-style: preserve-3d lets descendants retain their 3D positions.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Change the pivot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin, 3D Transforms and Perspective</title>
<style>
.demo { width: 100px; padding: 24px; margin: 40px; background: #bfdbfe; transform-origin: top left; transform: rotate(20deg); }
</style>
</head>
<body>
<div class="demo">Pivot here</div>
</body>
</html>What you see: The card rotates around its top left corner.
Example 2: A card with depth
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin, 3D Transforms and Perspective</title>
<style>
.scene { perspective: 500px; padding: 30px; }
.card { width: 160px; padding: 32px; background: #ddd6fe; transform: rotateY(30deg); backface-visibility: hidden; }
</style>
</head>
<body>
<div class="scene"><div class="card">A 3D card</div></div>
</body>
</html>What you see: Perspective makes the rotated card appear to recede in depth.
Example 3: Independent transforms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin, 3D Transforms and Perspective</title>
<style>
.demo { width: 100px; padding: 20px; background: #fef08a; margin: 30px; translate: 12px 4px; rotate: -10deg; scale: 1.1; }
</style>
</head>
<body>
<div class="demo">Three controls</div>
</body>
</html>What you see: Independent translate, rotate, and scale declarations combine.
Example 4: Keep nested transforms in 3D
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin, 3D Transforms and Perspective</title>
<style>
.scene { perspective: 600px; padding: 30px; }
.card { transform-style: preserve-3d; transform: rotateY(20deg); width: 170px; padding: 24px; background: #e0e7ff; }
.badge { display: inline-block; transform: translateZ(40px); background: #fde68a; padding: 8px; }
</style>
</head>
<body>
<div class="scene"><div class="card">Card <span class="badge">Raised</span></div></div>
</body>
</html>What you see: The badge retains a Z offset in its parent 3D space. Use this for controlled layered visual effects; compare preserve-3d with flat.
When and Where to Use It
Use transform-origin for hinged panels, perspective for restrained depth effects, and individual properties when separate states control separate transforms.
Common Mistake or Useful Tip
3D motion should not interfere with reading. For animated versions, honor prefers-reduced-motion.
Try It Yourself
Switch transform-origin to center and compare the first example.