admin管理员组

文章数量:1639594

目录

1、translate3d

2、透视perspective

3、rotated3d旋转

4、3D呈现transform-style（重要)

1、translate3d

在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。

z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。

/* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。

2、透视perspective

透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。

根据近大远小，物体遮挡后面看不见的原理。

透视写在被观察元素的父盒子上，透视越小（距离），我们看到的越大。

视距越小放大效果越明显，translateZ越大放大效果越明显。

当translateZ>perspective时，物体移到了视点后方，无法成象，所以看不到盒子。

3、rotated3d旋转

单位deg。旋转的方向依据左手准则，左手大拇指指向坐标轴的正向，其余手指弯曲的方向就是坐标轴的正向。

transform: rotate3d(1, 1, 1, 45deg);

这表示x,y,z都正向旋转45deg,也可以只ro

本文标签： 透视translate3dcssperspectivestyle

版权声明：本文标题：CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1725895318a1047570.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。