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
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
