0Pricing
CSS Academy · Lesson

3D Transforms: rotateX rotateY translateZ

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

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 */
}

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