18910140161

css3-3D特效

顺晟科技

2022-09-14 10:59:51

245

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轴向外【指向我们】的是正方向

    

 

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航