3D转换 透视 X轴旋转 Y轴旋转 3D呈现

 

注:语法有移动有旋转,先写移动 空格隔开

 

translate3d语法

transform:translate3d(x,y,z)

z 正值 表示向眼前走的距离

不设置的参数为0 不可省略

透视 perspective(px)

透视写在被观察元素的父盒子上

z轴越大(正值),我们看到的物体就越大

X轴旋转 rotateX(deg)

左手准则  左手指向X轴正方向,手指弯曲的方向就是正值所旋转的方向

Y轴旋转 rotateY(deg)

左手准则 左手的拇指指向Y轴的正方向(大拇指冲下)

其他手指的弯曲方向就是该元素沿Y轴旋转的方向(正值)

Z轴旋转 rotateZ(deg)

旋转 rotate3d(x,y,z,deg)

语法:rotate3d(x,y,z,deg)

哪轴旋转就设置为1,其余为0

3D呈现 transform-style

控制子元素是否开启三维立体环境    注:代码写给父级 但是影响的是子盒子

参数:

transform-style:flat  默认子元素不开启3D空间

transform-style:preserve-3d 子元素开启3D空间

发布了48 篇原创文章 · 获赞 3 · 访问量 876

猜你喜欢

转载自blog.csdn.net/procul/article/details/104766790
今日推荐