css3-3D特效

2D页面即是在浏览器中开发的页面，

3D可以比喻浏览器为窗口，透过浏览器看到3D物体

一、设置3D场景

　　perspective:800【3D世界中的物体距3D场景的距离800px】

　　perspective-origin:50% 50%【从浏览器观察的入口，X轴50%,Y轴50%，即从场景中央透过场景看3D世界】

二、展示3维效果

　　使用transform属性调整元素

　　因为transfrom也适应于2D场景中，所以为了使用浏览器知道此transfrom用于3D场景需要首页设置transfrom属性

transfrom-style:preserve-3d

　　——translate【位移操作】

　　　　· translateX(x px)

　　　　· translateY(y px)

　　　　· translateZ(z px)

　　——rotate【旋转操作】

　　　　· rotateX(x deg)

　　　　· rotateY(y deg)

　　　　· rotateZ(z deg)

　　在浏览器3D世界中

　　　　X轴向右是正方向，Y轴向下是正方向 ，Z轴向外【指向我们】的是正方向

转载于:https://www.cnblogs.com/chentingjun/p/6840205.html

原文地址：https://blog.csdn.net/weixin_30387423/article/details/95246484?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-27-95246484-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88