0Pricing
CSS Academy · Lesson

3D Transforms: rotateX rotateY translateZ

Rotate and move elements in three-dimensional space using 3D CSS transform functions.

3D Transforms: rotateX rotateY translateZ is a free CSS Academy lesson on CoddyKit — lesson 4 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.

3D Transform Overview

CSS 3D transforms extend the 2D system into a third dimension using the Z axis. Enable 3D with a perspective on the parent and transform-style: preserve-3d for nested 3D elements.

rotateX()

rotateX(angle) rotates an element around the horizontal X axis — like flipping a page toward or away from you.

.page {
  perspective: 800px;
}

.page .leaf {
  transform: rotateX(30deg); /* tilts top toward viewer */
}

rotateY()

rotateY(angle) rotates around the vertical Y axis — like turning a door on its hinge.

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

.card-flip:hover .card {
  transform: rotateY(180deg);
}

rotateZ()

rotateZ(angle) is identical to the 2D rotate() function — rotation in the plane of the screen.

rotate3d()

rotate3d(x, y, z, angle) rotates around a custom 3D axis vector. The x, y, z values define the direction of the axis.

.element {
  transform: rotate3d(1, 1, 0, 45deg);
  /* rotate around a diagonal XY axis */
}

translateZ()

translateZ() moves an element toward or away from the viewer along the Z axis. Positive values come closer; negative values go farther away.

.layer-front {
  transform: translateZ(100px); /* closer to viewer */
}

.layer-back {
  transform: translateZ(-100px); /* farther from viewer */
}

translate3d()

translate3d(x, y, z) moves an element in all three axes at once. Using translateZ(0) forces GPU layer promotion (a common performance hack).

.animated {
  transform: translate3d(0, 0, 0); /* GPU layer promotion */
}

scale3d()

scale3d(x, y, z) scales in three dimensions. scaleZ() scales depth — useful for 3D cube faces.

3D Cube Example

Building a cube using 3D transforms on six faces:

.cube-face { position: absolute; width: 100%; height: 100%; }
.front  { transform: translateZ(100px); }
.back   { transform: translateZ(-100px) rotateY(180deg); }
.left   { transform: translateX(-100px) rotateY(-90deg); }
.right  { transform: translateX(100px)  rotateY(90deg); }
.top    { transform: translateY(-100px) rotateX(90deg); }
.bottom { transform: translateY(100px)  rotateX(-90deg); }

Parallax 3D Effect

Using translateZ on child elements creates depth in a scrollable 3D scene (CSS Parallax):

.parallax-scene {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
}

.far-layer   { transform: translateZ(-200px) scale(1.67); }
.close-layer { transform: translateZ(0); }

Hardware Acceleration

3D transforms (even trivial ones like translateZ(0)) force the element onto its own GPU layer. This prevents paint during animation but uses GPU memory. Use intentionally, not as a blanket hack.

Quick Check

Which transform function moves an element along the Z axis (toward or away from the viewer)?

Recap

3D CSS transforms use rotateX/Y/Z() for rotation around each axis and translateZ() for depth movement. Enable true 3D with perspective on the parent and transform-style: preserve-3d. Use backface-visibility: hidden for flip effects. 3D transforms force GPU layer promotion for smooth animation.

Frequently asked questions

Is the “3D Transforms: rotateX rotateY translateZ” lesson free?

Yes — the full text of “3D Transforms: rotateX rotateY translateZ” 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 “3D Transforms: rotateX rotateY translateZ”?

Rotate and move elements in three-dimensional space using 3D CSS transform functions. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “3D Transforms: rotateX rotateY translateZ” 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