What are perspective and perspective-origin in 3D transforms? What is the purpose of transform-style: preserve-3d?

Question

Accepted Answer

In CSS 3D transformations, `perspective`, `perspective-origin`, and `transform-style: preserve-3d` work together to control how depth and 3D positioning appear on screen. They define the viewing distance, the viewpoint position, and how nested elements maintain 3D space. The `perspective` property defines how far the viewer is from the Z=0 plane, effectively determining the strength of the 3D effect. A smaller value (e.g., 200px) creates a more intense depth effect, while a larger value (e.g., 1000px) flattens the view. .scene {
  perspective: 600px; /* Viewer distance from the object */
}

.box {
  width: 150px;
  height: 150px;
  background: lightcoral;
  transform: rotateY(45deg);
  transition: transform 0.5s ease;
} In this example, the parent `.scene` provides a perspective, making the rotated `.box` appear as if it’s turning in real 3D space. The `perspective-origin` property defines the point from which the viewer observes the 3D scene — similar to moving the camera’s position. By default, it’s at the center (50% 50%), but you can shift it horizontally or vertically. .scene {
  perspective: 600px;
  perspective-origin: left top; /* Viewpoint from top-left corner */
} Changing the origin alters how rotations appear. For example, rotating around the Y-axis looks different if the viewer’s perspective is from the left instead of the center. The `transform-style` property determines whether child elements of a 3D-transformed element retain their 3D position. Setting `transform-style: preserve-3d` ensures that child elements are rendered in the same 3D space, maintaining depth and perspective relationships. .card {
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card:hover {
  transform: rotateY(180deg);
} This property is essential for effects like 3D card flips, where both the front and back faces need to remain in the same 3D plane as the parent element rotates. `perspective` — defines the viewer’s distance; smaller values create stronger depth. `perspective-origin` — sets the viewer’s position (like the camera angle). `transform-style: preserve-3d` — allows child elements to maintain their 3D positions. Apply `perspective` to the parent container of 3D elements, not directly on the transforming element. Use `perspective-origin` to control the direction and angle of the 3D view. Always use `transform-style: preserve-3d` when creating nested 3D transformations (like card flips).

What are perspective and perspective-origin in 3D transforms? What is the purpose of transform-style: preserve-3d?

Understanding perspective, perspective-origin, and transform-style: preserve-3d in CSS 3D Transforms

What are perspective and perspective-origin in 3D transforms? What is the purpose of transform-style: preserve-3d?

Understanding perspective, perspective-origin, and transform-style: preserve-3d in CSS 3D Transforms

Scenario Questions

Follow-up Questions