admin 管理员组

文章数量: 1184232

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，透视的基础认识，案例演示，注意事项 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1758711736a3089534.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。