CSS transform

CSS transform translates or rotates the element in a coordinate system.

A 3-D coordinate system consists of x, y and z-axes. X-axis is from left to right. Y-axis is from top to bottom. And Z-axis is perpendicular to this page.

transform along 3-axes

Example

web4college

transform:rotatex(45deg);

web4college

transform:rotatey(45deg);

web4college

transform:rotatez(45deg);


Try </>

Note: Always add -webkit- prefix to the transform, transition and animation type properties otherwise these properties don't work in safari.

There are two values of the transform (rotate() and translate()).

rotate() values

It can rotate the element along X, Y or Z axis. The value in the parentheses represents the value of angle.

For example, rotateX(45deg) means element should rotate 45 degree around X-axis.

rotateX()

rotateX() value rotates the element around x-axis.

Example

transform:rotateX(0deg);

transform:rotateX(45deg);

Try </>

Perspective property makes the projection of the box after rotating. The 3d tranformation is possible due to perspective property.

rotateY()

rotateY() rotates the element around y-axis.

Example

transform:rotateY(0deg);

transform:rotateY(45deg);

Try </>

rotateZ()

roateZ() rotates the element around z-axis.

Example

transform:rotateZ(0deg);

transform:rotateZ(45deg);

Try </>

translate(x,y) value

It translates the element along x and y axes. For example, translate(100px,100px) value translates the element 100px along x-axis and y-axis.

Example

<style>
.translate{
  transform:translate(100px,100px);	
}
</style>
Try </>

perspective property

It represents the projection of the box. The projection seems to be coming out of the page (3 dimensional). See the example to understand.

Example


Internal

perspective:300px;


Try </>

Perspective property is always used in the parent element (box). Remove or change the perspective property to understand.

transform-style

There are two values of the transform-style. One is flat and the other one is preserve-3d. flat is the default value of tranform-style. preserve-3d preserves the 3d nature of the child element (box).

Example


transform-style:preserve-3d;

Try </>

Remove the transform-style property to understand.

transform-origin

It specifies the reference point for the transformation. Normally, the transform-origin is at the center of the box. The value of transform-origin may be a keyword or numerical value.

Example


transform-orign:center;
The transform-origin (reference point) of the first lightskyblue box is at the center of the box.

transform-origin:center;

transform-orign:left;
The transform-origin of the second lightskyblue box is on the left side of the box.

transform-origin:left;


Try </>

There are many other values of the transform-origin such as right, top and bottom.



Was this article helpful?

 

Email:

Message:

Get the newsletter