CSS3 3D Transformation

CSS3 3D transformation function allows in3transform elements in D space.

elements3D conversion

Using CSS3 3D transformation function, you can perform basic transformation operations on elements in three-dimensional space, such as moving, rotating, scaling, and tilting.

Transformed elements do not affect surrounding elements, but can overlap as if they were absolutely positioned elements. However, transformed elements still occupy space in the layout in their default position (untransformed).

Using CSS transformations and Transform() function transformation functions

CSS3 The transform attribute uses transformation functions to manipulate the coordinate system used by elements, so that transformation effects can be applied.

The following section describes3D transformation function:

translate3d() function

rotation3The d() function will3Elements in D space rotate around the vector [x, y, z] to a specified angle around the origin. This can be written as rotate(vx, vy, vz, angle).

Example

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

The function translate3d(25px, 25px, 5Move the image in the positive X and Y axis directions25pixels, and move along the positive Z axis50 pixels.

3D transformation uses a three-dimensional coordinate system, but movement along the Z direction is not always obvious, because these elements exist in a two-dimensional plane (plane) and do not have depth.

By making the element higher on the Z axis (i.e., the element closer to the viewer looks larger, and the element farther from the viewer looks smaller), perspective and perspective-The CSS property origin adds depth to the scene.

rotate3d() function

This rotate3d() function rotates the element in D space around the [x, y, z] directional vector3D space elements rotate by a specified angle. It can be written 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,　6, 0deg);　/*　Chrome, Safari, Opera　*/
　　　　transform: rotate3d(0,　1, 0,　6, 0deg);　
}

This function rotate3d(0, 1, 0, 6, 0deg) to rotate the image along the Y axis6degrees. You can also use negative values to rotate the element in the opposite direction.

scale3d() function

scale3d() function changes the size of the element. It can be written as scale(sx, sy, sz). Unless it is combined with other transformation functions such as rotation and perspective, the effect of this function is not obvious, as shown in the following example.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px solid #6486ab;
　　　　background: #e9eef3;
}
.transformed {
　　　　-webkit-transform: scale3d(1,　1,　2) rotate3d(1, 0, 0,　6, 0deg);　/*　Chrome, Safari, Opera　*/
　　　　transform: scale3d(1,　1,　2) rotate3d(1, 0, 0,　6, 0deg);　
}

function scale3d(1, 1, 2) to scale the element along the Z axis, function rotate3d(1, 0, 0, 6, 0, 0, 0deg) to rotate the image along the X axis60 degrees.

matrix3d() function

matrix3d() function can perform all3D transformation, such as translation, rotation, and scaling. It takes4×4transformationmatrixin the form of16parameters.

This is using matrix3d() function executes3Example of D transformation.

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

However, it is more convenient to use a single transformation function and list them in order when performing multiple transformations at once, as shown below:

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

3D Transformation Functions

The following table briefly summarizes all3D Transformation Function.