css rotation effect

CSS rotation effect is a commonly used effect in web development, which can add dynamics and beauty to web pages. This article will introduce the relevant knowledge about using the transform attribute in CSS to achieve rotation effects.

1. Overview of the transform attribute

The transform attribute in CSS3 is used to transform HTML elements, including operations such as moving, scaling, rotating, and beveling. It can be matched with different parameters. to achieve a variety of transformation effects. The transform attribute needs to be prefixed to be compatible with all browsers, such as: -webkit-transform, -moz-transform, -o-transform, transform. Among them, -webkit-transform is the prefix set to adapt to the Webkit kernel browser.

2. Implementation of rotation effect

The transform attribute can be controlled through transformation functions such as matrix, translate, scale, rotate, and skew. This article will focus on the use of the rotate function.

1. Rotation unit

The rotation unit in CSS can be expressed in angle or radian, and angle is usually used as the unit of rotation. Angle is measured in degrees, so you can express the angle of rotation numerically. For example, rotating 45 degrees can be achieved using rotate(45deg). In addition, radians in CSS are measured in rad, and 1rad is equivalent to 180°/π≈57.3 degrees.

2. Realize rotation

The rotation effect is achieved through the rotate function, which requires a parameter indicating the angle of rotation. At the same time, this function can be used in combination with other transformation functions to achieve complex transformation effects.

The following is a code example to achieve the rotation effect:

c9ccee2e6ea535a969eb3f532ad9fe89
.rotate {

-webkit-transform: rotate(45deg); /* Webkit内核浏览器 */
-moz-transform: rotate(45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate(45deg); /* Opera 浏览器 */
transform: rotate(45deg); /* 标准语法 */

}
531ac245ce3e4fe3d50054a55f265927
41f4583e9f567ac77c0973b98d0bbcc9Hello, World!16b28748ea4df4d9c2150843fecfba68

In the above code, the div element is rotated 45 degrees, and the style named rotate sets the Webkit kernel browser, The rotation effect of Mozilla Firefox browser and Opera browser also adds a standard syntax transform style to ensure browser compatibility.

3. Realize 3D rotation effect

In addition to the two-dimensional rotation effect, the transform attribute can also achieve 3D rotation effect. In order to achieve a 3D rotation effect, you need to use three parameters of the rotate function: the first parameter is the angle of rotation, the second parameter is the axis of rotation, and the third parameter is the perspective effect of rotation.

The following is a sample code to achieve a 3D rotation effect:

c9ccee2e6ea535a969eb3f532ad9fe89
.rotate3d {

-webkit-transform: rotate3d(1,1,0,45deg); /* Webkit内核浏览器 */
-moz-transform: rotate3d(1,1,0,45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate3d(1,1,0,45deg); /* Opera 浏览器 */
transform: rotate3d(1,1,0,45deg); /* 标准语法 */

}
531ac245ce3e4fe3d50054a55f265927
8dd8a8157466663a142f78f7451d0196Hello, World!16b28748ea4df4d9c2150843fecfba68

In the above code, the div element implements a 3D rotation of 45 degrees around the (1,1,0) axis As a result, all browser prefixes are also added for compatibility.

3. Summary

Through the rotate function of the transform attribute, we can achieve the rotation effect of web page elements and also achieve the 3D rotation effect. Appropriate use of these methods can make our web page elements more vivid and dynamic.

The above is the detailed content of css rotation effect. For more information, please follow other related articles on the PHP Chinese website!