admin管理员组文章数量:1130349
1.透视的基础认识。
1.如果想要在网页产生3D效果需要透视。
2.透视，我们也称之为视距，视距是人的眼睛到屏幕的距离。
3.距离视觉点越近的在电脑平面成像越大，越远成像越小。
4.透视的单位是像素。
注意：
透视写在被观察元素的父盒子上面
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z:就是 z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大
2.案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
/* 透视写在被观察元素的父盒子上。 */
perspective: 500px;
/* 透视越小表示，离屏幕越近，图像就越大 */
}
div {
width: 200px;
height: 200px;
background-color: red;
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* translateZ表示在y轴上移动 ，且单位通常为px*/
/* 下面这个方式与下面这个方式相同。 */
transform: translate3d(400px, 100px, 100px);
/* 其中的x,y,z三者都不能省略，如果想要省略写0就好了。 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.透视的基础认识。
1.如果想要在网页产生3D效果需要透视。
2.透视，我们也称之为视距，视距是人的眼睛到屏幕的距离。
3.距离视觉点越近的在电脑平面成像越大，越远成像越小。
4.透视的单位是像素。
注意：
透视写在被观察元素的父盒子上面
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z:就是 z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大
2.案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
/* 透视写在被观察元素的父盒子上。 */
perspective: 500px;
/* 透视越小表示，离屏幕越近，图像就越大 */
}
div {
width: 200px;
height: 200px;
background-color: red;
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* translateZ表示在y轴上移动 ，且单位通常为px*/
/* 下面这个方式与下面这个方式相同。 */
transform: translate3d(400px, 100px, 100px);
/* 其中的x,y,z三者都不能省略，如果想要省略写0就好了。 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
版权声明：本文标题：CSS3进阶知识：透视perspective，透视的基础认识，案例演示，注意事项 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758711729a2783196.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论