Article directory
1. translateZ conversion analysis
1. Spatial analysis corresponding to translateZ conversion
"Perspective" is to simulate human glasses, to observe the imaging of objects on a plane,
translateZ transformation, the object moves along the Z axis, which is the Z distance in the figure below;
The Z value of the Z axis is the distance between the object and the imaging plane, and the default is 0;
- If Z increases, it means that the closer the object is to the eye, the larger the imaging range on the plane;
- If Z decreases, it means that the farther the object is from the eye, the smaller the imaging range on the plane;
The translateZ conversion is the Z distance conversion in the above figure, the larger the Z, the closer to the eyes, the larger the object will be displayed;
2. The web page debugging tool debugs the translateZ attribute value
In the web page, modify transform: translateZthe attribute value of the label element. When the Z-axis translation value is 0, the displayed style is as follows, and the displayed size of the label element is its own size;
When the Z-axis translation value is -200 px, the displayed style is as follows, and the label element will become smaller; the near is bigger and the far is smaller, and this is farther away;
When the Z-axis translation value is 200 px, the displayed style is as follows, the label element will become larger; the closer is bigger and the far is smaller, and this is getting closer;
2. Code example - translateZ conversion analysis
1. Code example - a reference example where translateZ is 0
In the code below, a viewing distance of 500 pixels is set;
Set the element's 3D transform property to:
/* 设置 3D 转换 */
transform: translateZ(0)
It is equivalent to the line-of-sight (the distance between the human eye and the imaging plane) d = 500 d = 500 in the figure belowd=500 pixels, the distance between the object and the imaging planeZ = 0 Z = 0Z=0 pixels, at this time the size of the object is its own size;
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;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 设置 3D 转换 */
transform: translateZ(0)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Execution effect: the size of the div in the webpage is 200 pixels;
2. Code example - translateZ is 200 example
In the code below, a viewing distance of 500 pixels is set;
Set the element's 3D transform property to:
/* 设置 3D 转换 */
transform: translateZ(200)
It is equivalent to the line-of-sight (the distance between the human eye and the imaging plane) d = 500 d = 500 in the figure belowd=500 pixels, the distance between the object and the imaging planeZ = 200 Z = 200Z=200 pixels, at this time, the image size of the object on the plane is larger than its own size;
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;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 设置 3D 转换 */
transform: translateZ(200px)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Execution effect: the size of the div in the web page is much larger than 200 pixels;
