立方体:http://sandbox.runjs.cn/show/1h6zvghj

原理分析:(左负右正)

css3d

x:与屏幕水平;(在屏幕上)

y:与屏幕水平方向垂直(在屏幕上)

z:垂直于屏幕(在屏幕外)

 

rotate:顺时针为正,逆时针为负。

translateZ:靠近自己的为正,远离自己的为负。

perspective:一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致!!

css3d

 

舞台---

   容器----

      元素-----

      元素-----

      元素-----

      元素-----

      ......

 

舞台:

perspective: 800px;

容器:

transform-style: preserve-3d;

元素:

transform: rotateY( 160deg ); 

 

相关文章:

  • 2021-08-22
  • 2021-12-27
  • 2022-01-09
  • 2021-05-12
猜你喜欢
  • 2021-07-11
  • 2021-07-24
  • 2021-10-21
  • 2022-02-20
  • 2022-12-23
  • 2021-10-16
  • 2022-12-23
相关资源
相似解决方案