CSS transform-origin property

Description

CSS transform-origin property represents the reference by which the box (element) rotates.

The first and second values represent the position of transform-origin from the left and top sides respectively. If only one value is specified for this property, the second value is assumed to be center.

Syntax

transform-origin : [left | center | right | length | percentage ] [ top | bottom | length | percentage]

Property values

50% 50%Default

The transform-origin is 50% away from left side and 50% away from the top side. It is the same as transform-origin: center center;.

transform-origin: 50% 50%;

0% 100%

The transform-origin is 0% away from left side and 100% away from the top side. It is the same as transform-origin: left bottom; i.e. left-bottom corner.

transform-origin: 0% 100%;

left

The transform-origin is at the center of left side. It is the same as transform-origin: left center;.

transform-origin: left;

right

The transform-origin is at the center of right side. It is the same as transform-origin: right center;.

transform-origin: right;

center

The transform-origin is at the center of box both horizontally and vertically. It is the same as transform-origin: center center;.

transform-origin: center;

top

The transform-origin is at the center of top side. It is the same as transform-origin:top center;.

transform-origin: top;

bottom

The transform-origin is at the center of bottom side. It is the same as transform-origin:bottom center;

transform-origin: bottom;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
hover over me to see the effect of transform-origin.
×

Ctrl+D