With CSS3's 3D transform feature, you can perform various basic transformations like moving, rotating, scaling, and skewing elements within a three-dimensional space.
When an element is transformed, it doesn't affect the surrounding elements but can overlap them, similar to absolutely positioned elements. However, the transformed element still occupies space in the layout at its original (un-transformed) position.
The CSS3 transform property employs transform functions to modify the coordinate system used by an element, allowing the application of transformation effects.
The following section delineates the 3D transform functions:
translate3d() FunctionThis function relocates the element from its current position to a new position along the X, Y, and Z-axis. It's denoted as translate(tx, ty, tz). Percentage values are not permitted for the third translation-value parameter (i.e., tz).
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px); /* Standard syntax */
}The translate3d(25px, 25px, 50px) function moves the image 25 pixels along the positive X and Y-axis, and 50 pixels along the positive Z-axis.
Although 3D transform utilizes a three-dimensional coordinate system, movement along the Z-axis isn't always noticeable because elements exist on a two-dimensional plane (a flat surface) with no depth.
The perspective and perspective-origin CSS properties can impart depth to a scene by making elements closer to the viewer appear larger on the Z-axis and those farther away appear smaller.
Note: Applying 3D transformations to an element without setting the perspective won't create a three-dimensional effect.
rotate3d() FunctionThis function rotates the element in 3D space by a specified angle around the [x,y,z] direction vector. It's expressed as rotate(vx, vy, vz, angle).
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}The rotate3d(0, 1, 0, 60deg) function rotates the image by 60 degrees along the Y-axis. Negative values can be used to rotate the element in the opposite direction.
scale3d() FunctionThis function alters the size of an element and is written as scale(sx, sy, sz). Its effect becomes evident when used in conjunction with other transform functions like rotate and perspective, as illustrated in the example below.
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax */
}The scale3d(1, 1, 2) function scales the elements along the Z-axis, while the rotate3d(1, 0, 0, 60deg) function rotates the image by 60 degrees along the X-axis.
matrix3d() FunctionThe matrix3d() function has the capability to execute various 3D transformations like translation, rotation, and scaling all at once. It requires 16 parameters structured in a 4×4 transformation matrix format.
Here's an example demonstrating the use of the matrix3d() function for 3D transformations:
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}
.transformed {
-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Chrome, Safari, Opera */
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Standard syntax */
}However, when applying multiple transformations simultaneously, it's more convenient to use individual transformation functions and list them sequentially, like this:
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Standard syntax */
}The below table offers a quick summary of all the 3D transformations.
| Function | Description |
|---|---|
translate3d(tx,ty,tz) |
Moves the element by the given amount along the X, Y & Z-axis. |
translateX(tx) |
Moves the element by the given amount along the X-axis. |
translateY(ty) |
Moves the element by the given amount along the Y-axis. |
translateZ(tz) |
Moves the element by the given amount along the Z-axis. |
rotate3d(x,y,z, a) |
Rotates the element in 3D space by the angle specified in the last parameter, around the [x,y,z] direction vector. |
rotateX(a) |
Rotates the element by the given angle around the X-axis. |
rotateY(a) |
Rotates the element by the given angle around the Y-axis. |
rotateZ(a) |
Rotates the element by the given angle around the Z-axis. |
scale3d(sx,sy,sz) |
Scales the element by the given amount along the X, Y and Z-axis. The function scale3d(1,1,1) has no effect. |
scaleX(sx) |
Scales the element along the X-axis. |
scaleY(sy) |
Scales the element along the Y-axis. |
scaleZ(sz) |
Scales the element along the Z-axis. |
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
Specifies a 3D transformation in the form of a 4×4 transformation matrix of 16 values. |
perspective(length) |
Defines a perspective view for a 3D transformed element. In general, as the value of this function increases, the element will appear further away from the viewer. |