3D转换

3D移动

其实对比2D就多了个translateZ()

用法:

transform:translateX();
transform:translateY();
transform:translateZ();
transform:translateX() translateY() translateZ();
transform:translate(x,y,z);//简写的方法

z轴 垂直纸面 向外为正方向(面向自己) 向内(背向自己)

简写的方式,xyz 每一个值无法省略。

image-20210109013330216

透视 perspective

如果我们单单设置translateZ() 是没有效果的,网页有3D效果 那么必须要有 透视属性(设置观察点)。

透视其实理解成视距更好,透视指的是 人的眼睛里屏幕的距离perspective是给父元素设置的

image-20210109010113511

有了这张图 外面外加一点想象 ,如果 视距越大 那么屏幕上是不是就图形在屏幕上越小哇,那么视距越小 就越大

  • perspective 越大 图形越小
  • translateZ(n) n越大 图形越大

上面的都是我个人的理解,其实还有错误的地方,这里我默认 z轴的值大于0,错误的理解我放出来就是来警醒我自己的。

正确理解

perspective指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果

z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度perspective的值决定

3D旋转

transform:rotateX(45deg);//沿着X轴旋转
transform:rotateY(45deg);//沿着Y轴旋转
transform:rotateZ(45deg);//沿着Z轴旋转
transform:rotate3d(x,y,z,45deg);//沿着自定义的轴旋转

首先确定正方向,我们使用左手定则 :大拇指为正方向,那么四指就是旋转正方向

image-20210109014702280

rotate3d(x,y,z,a)

旋转轴由一组 [x, y, z] 矢量定义,这个其实举个例子就好理解了

比如说 rotate3d(0,1,1,adeg) 就是沿着向量 [0,1,1]旋转 a度 如图 :

image-20210109015436225

方向还是左手定则。

3D呈现 transform-style

transform-style这个属性是控制子元素是否开始3D空间

  • transform-style:flat 子元素没有3D空间,这个也是默认值
  • transform-style:preserve-3d子元素开启3D空间
  • 这个属性不会被继承,所以我要设置到他的第一个父元素上面

什么?3D空间还要开启,扯淡呢 ? 我们实践出真理一下。

这是开启后的效果preserve-3d

非常符合我的预期

preserve-3d

没有开启flat

看到他,我就想起来 有点像 世界上第一款FPS游戏《毁灭战士》 的一些3D效果 ,或者是 《我的世界》的火焰效果

flat

设置中心点 transform-origin

这个和2D的没有啥区别,只不过多了个z

transform-origin: x y z;

结语

文字总结不够形象 ,可以看一下 我关注的up[xiao-high]的视频,蛮不错的。

放假咸鱼的第15天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/09/css3d转换
最后更新于:  203  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟