0Pricing
CSS Academy · Lesson

Transform Origin and Perspective

Change the pivot point of transforms with transform-origin and add depth with perspective.

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

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