CSS transform

CSS transform property translates, rotates, scales, or skews the box in a coordinate system.

1. transform (along 3-axes)

Example

web4college

transform:rotatex(45deg);

web4college

transform:rotatey(45deg);

web4college

transform:rotatez(45deg);

The following are the following values of transform property.

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);

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);

rotateZ()

roateZ() rotates the element around z-axis.

Example

transform:rotateZ(0deg);

transform:rotateZ(45deg);

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

2. 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;

Remove the transform-style property to understand.

3. 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;

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

4. 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;

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

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

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.

Next Previous