CSS 3D Transforms

❮ Previous Home Next ❯

You can use CSS 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional.

The transformed element does not affect the surrounding elements, but can overlap them, just like the absolutely positioned elements.

The following are the CSS 3D transformation functions:




The CSS rotate3d Function

The rotate3d() css function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.

Syntax:

rotate3d(x, y, z, angle)
Normal
transform: rotate3d(1, 2, -1, 192deg);

Example

.example {
  transform: rotate3d(1, 2, -1, 192deg);
}



The CSS scale3d Function

The scale3d() css function defines a transformation that resizes an element in 3D space.

Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.

Syntax:

scale3d(sx, sy, sz)
Normal
transform: scale3d(2, 0.5, 0.2);

Example

.example {
  transform: scale3d(2, 0.5, 0.2);
}






The CSS matrix3d Function

The matrix3d() css function defines a 3D transformation as a 4x4 homogeneous matrix.

Syntax:

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Normal
transform: matrix3d();

Example

img:hover {
  transform: matrix3d(0.5, 0, -0.866025, 0, 0.595877, 1.2, -1.03209, 0, 0.866025, 0, 0.5, 0, 25.9808, 0, 15, 1);
}



The CSS translate3d Function

The translate3d() css function repositions an element in 3D space.

Syntax:

translate3d(translateX, translateY, translateZ)
Normal
transform: translate3d(10px, 10px, 10px);

Example

.example {
  transform: translate3d(10px, 10px, 10px);
}



All CSS 3D Transform Properties

Property Description
backface-visibility Sets whether or not the back face of an element should be visible when facing the user.
perspective Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
perspective-origin Determines the position at which the viewer is looking.
Alphabet-T transform Lets you rotate, scale, skew, or translate an element.
transform-origin Sets the origin for an element's transformations.
transform-style Sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.



All CSS 2D Transform Functions

Function Description
rotate3d() Defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.
scale3d() Defines a transformation that resizes an element in 3D space.
matrix3d() Defines a 3D transformation as a 4x4 homogeneous matrix.
translate3d() Repositions an element in 3D space.
❮ Previous Home Next ❯