Article directory
1. Introduction to the concept of "perspective"
1. Introduction of the concept of "perspective"
Introduce the concept of 3D effect perspective view Perspective in this blog ;
To produce 3D effect in 3D view, the ultimate requirement is to have a perspective effect. In layman's terms, "perspective" is to achieve the effect of "near large, far small";
Perspective is the projection of objects in 3D space onto a 2D plane;
Perspective View ( Perspective View ) : near big and far small , in line with the law of normal human eyes observing the 3D world;
- Near large: When the object is relatively close to the observation point (viewpoint) , the display effect is relatively large;
- Far small: When the object is far away from the observation point (viewpoint), the display effect is relatively small;
The picture below uses the principle of perspective view, the camera is very close to the bird, but far away from the person;
2. Relationship between viewing distance and imaging
In the figure below, 
it is a person's glasses, 
an object in 3D space, 
and a 2D plane. Perspective is to project the middle 3D object into the 2D plane;
- If the intermediate 3D object moves forward, the projection displayed in the 2D plane will become larger;
- If the 3D object in the middle is moved backwards, the projection displayed in the 2D plane will be smaller;
Viewing distance: The distance from the human eye to the screen is the viewing distance, which is the d distance in the above figure;
- The smaller the viewing distance, that is, the closer the viewpoint to the 2D plane, the larger the imaging of the 2D plane;
- The larger the viewing distance, that is, the distance between the viewpoint and the 2D plane, the smaller the imaging of the 2D plane;
Example of viewing distance: look at the computer screen, if the distance is relatively short, the viewing distance is small and the imaging is large, such as VR eyes, the imaging can be very large;
2. "Perspective" property setting in CSS3
1. "Perspective" syntax setting
The perspective attribute needs to be written on the parent container of the observed element;
Perspective attribute syntax:
perspective: d;
Set the perspective attribute value to pixel px, and set the viewing distance, that is, the distance from the viewpoint to the projection plane;
- The smaller the viewing distance, the larger the imaging;
- The larger the viewing distance, the smaller the imaging;
Example of perspective perspective property usage:
body {
/* 透视 属性 需要写在 被观察元素 的 父容器 上
视距越小 成像越大
如果想要网页中的元素看起来大一些 可以减小视距 */
perspective: 500px;
}
2. Code example - "Perspective" syntax setting
Code sample after perspective added
The core code is as follows: the perspective effect needs to be set for the div, and it needs to be set on the parent container body of the div;
body {
/* 透视 属性 需要写在 被观察元素 的 父容器 上
视距越小 成像越大
如果想要网页中的元素看起来大一些 可以减小视距 */
perspective: 500px;
}
Code example with perspective added:
<!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;
/* 设置 3D 转换 */
transform: translateX(100px) translateY(100px) translateZ(100px)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Results of the
Results of the :
Refer to the previous blog 【CSS3】CSS3 3D Transformation ① (Introduction to CSS3 3D Transformation | Difference between 3D Object and 2D Object | 3D Space Coordinate System | Commonly Used 3D Transformation Properties | 3D Displacement Transformation Syntax | Code Example), there is no perspective setting Effect, obviously after adding perspective, 3D objects are imaged larger in the webpage;
