Web4College

CSS transform-origin property

src

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%;
Try it

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%;
Try it

left

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

transform-origin: left;
Try it

right

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

transform-origin: right;
Try it

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;
Try it

top

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

transform-origin: top;
Try it

bottom

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

transform-origin: bottom;
Try it

Applicable to

It applies to all elements