Transform Origin and Perspective
Change the pivot point of transforms with transform-origin and add depth with perspective.
Transform Origin and Perspective is a free CSS Academy lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
transform-origin Default
By default, transforms happen around the element's center point: 50% 50%. The transform-origin property changes this pivot.
Setting transform-origin
Accepts keywords, percentages, or lengths. Format: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin with Scale
Scaling from the top-left corner (useful for dropdown expand animations):
<div class="dropdown open">Dropdown menu</div>transform-origin with Rotation
Rotate a clock hand around its base:
<div class="clock"><div class="hand"></div></div>perspective Property
perspective sets the distance between the user and the z=0 plane for 3D transforms. Smaller values create more dramatic perspective distortion; larger values create subtle depth.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Changes the vanishing point of the perspective. Default is center (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective as a Function
perspective() can also be used as a transform function on the element itself (not the parent). This limits the 3D context to that element only.
<div class="card">Card</div>transform-style: preserve-3d
By default, child 3D transforms are flattened into 2D. Set transform-style: preserve-3d on the parent to maintain true 3D positioning of children.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Card Flip Effect
The classic flip card using perspective and preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden hides the back face of a 3D-transformed element. Essential for flip cards where the back should not be visible through the front.
Combining Perspective and Origin
A dramatic 3D hover tilt effect responding to cursor position:
<div class="card demo-active">3D Tilt Card</div>Quick Check
A dropdown uses transform: scaleY(0) to hide and scaleY(1) to show. Which transform-origin makes it grow downward from the top?
Recap
transform-origin changes the pivot point for rotations and scales — crucial for dropdown expansions, clock hands, and hover tilts. perspective on the parent creates the 3D depth context. transform-style: preserve-3d enables nested 3D elements. backface-visibility: hidden hides element backs in flip effects.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Transform Origin and Perspective” lesson free?
Yes — the full text of “Transform Origin and Perspective” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.
What will I learn in “Transform Origin and Perspective”?
Change the pivot point of transforms with transform-origin and add depth with perspective. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “Transform Origin and Perspective” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Translate Rotate and Scale
- Skew and Matrix Transforms
- Transform Origin and Perspective
- 3D Transforms: rotateX rotateY translateZ