0Pricing
CSS Academy · Lesson

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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

.spinning-logo {
  transform-origin: top right;
}

.page-fold {
  transform-origin: left center;
}

.tooltip::after {
  transform-origin: 50% 0; /* top center */
}

transform-origin with Scale

Scaling from the top-left corner (useful for dropdown expand animations):

.dropdown {
  transform-origin: top left;
  transform: scaleY(0);
  transition: transform 200ms ease;
}

.dropdown.open {
  transform: scaleY(1);
}

transform-origin with Rotation

Rotate a clock hand around its base:

.hand {
  transform-origin: bottom center;
  transform: rotate(var(--angle));
}

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.

.scene {
  perspective: 600px; /* dramatic */
}

.scene-wide {
  perspective: 2000px; /* subtle */
}

perspective-origin

Changes the vanishing point of the perspective. Default is center (50% 50%).

.scene {
  perspective: 800px;
  perspective-origin: left top;
}

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.

.card {
  transform: perspective(600px) rotateY(20deg);
}

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.

.scene {
  perspective: 800px;
  transform-style: preserve-3d;
}

.card-front, .card-back {
  position: absolute;
  backface-visibility: hidden;
}

Card Flip Effect

The classic flip card using perspective and preserve-3d:

.card-wrapper {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 600ms;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

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:

.card {
  transition: transform 300ms ease;
}
/* Set rotation with JS based on mouse position:
document.querySelector('.card').style.transform = 
  `perspective(600px) rotateX(${rx}deg) rotateY(${ry}deg)`; */

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.

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, and the CSS Academy course includes 4 lessons in total. 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.

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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Translate Rotate and Scale
  2. Skew and Matrix Transforms
  3. Transform Origin and Perspective
  4. 3D Transforms: rotateX rotateY translateZ
← Back to CSS Academy