Article directory
1. 3D rotation rotate3d
3D rotation refers to the rotation around the X-axis, Y-axis, and Z-axis in the three-dimensional space coordinate system, and it can also rotate around a custom axis;
2D rotation can only rotate around a certain point, and 3D rotation can rotate around a certain axis;
1. Rotate3d syntax
3D rotation syntax in CSS3:
- Rotate around the X axis: rotate 45 degrees along the positive direction of the X axis;
transform: rotateX(45deg)
- Rotate around the Y axis: rotate 45 degrees along the positive direction of the Y axis;
transform: rotateY(45deg)
- Rotate around the Z axis: rotate 45 degrees along the positive direction of the Z axis;
transform: rotateZ(45deg)
- Rotate along a custom axis: rotate the deg angle along a custom axis;
transform: rotate3d(x, y, z, deg)
2. rotate3d custom axis rotation
The rotate3d function below accepts four parameters, the first three parameters are used to specify the axis of the custom rotation,
0, 0, 1,Note that only the Z axis is used as the axis of rotation here,
The actual effect of the following code is to rotate 360 degrees around the Z axis;
div {
transform: rotate3d(0, 0, 1, 360deg);
}
3. Element rotation direction - left hand rule
The direction is judged when the element is rotated, and the judgment is made according to the left-hand criterion;
Left-hand rule: the thumb of the left hand points to the positive direction of the corresponding axis, and the direction of finger bending is the direction of rotation around the axis;
For the positive and negative directions of each axis, refer to the figure below:
2. Code example
1. Code example
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 转换 - 平移</title>
<style>
body {
/* 透视 属性 需要写在 被观察元素 的 父容器 上
视距越小 成像越大
如果想要网页中的元素看起来大一些 可以减小视距 */
perspective: 500px;
}
img {
/* 将图片设置为行内块元素 */
display: block;
/* 设置图片 上下 100 像素外边距 水平居中对齐 */
margin: 100px auto;
/* 设置动画过渡时间 2 秒 */
transition: all 2s;
}
img:hover {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<img src="images/logo.png">
</body>
</html>
2. Execution results
The normal display status is as follows:
After the mouse moves over the image, it will change to the following style:
