CSS3:3D转换
程序员文章站
2022-07-12 23:32:10
...
3维坐标系：
- z轴：垂直屏幕：往外是正值，往里是负值
3D转换主要知识点：
- 3D位移：translate3D（x,y,z）
- 3D旋转：rotate3D（x,y,z）
- 透视（3D眼镜）：perspective
- 3D呈现：transform-style
3D位移
translateZ一般跟px单位，不用百分比
透视（perspective）
透视可以比喻成我们的3D眼镜，近大远小：透视越大，成像越小；透视越小，成像越大。透视单位为px
透视要写在被观察元素的父盒子上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{//此时div的父元素为body，所以perspective应该写在body元素上面
perspective: 200px;
}
div{
background-color: pink;
width: 500px;
height: 500px;
transform: translate(100px,400px,500px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3D转换之旋转
旋转后用perspective看效果更好
简写方式：
-
transform：rotate（x，y，z，deg），哪个坐标有值就往哪个坐标旋转：
例如：transform：rotate（1，0，0，45deg）；表示往x轴旋转（有值即可transform：rotate（2，0，0，45deg）也是旋转45度）。
此时如果有两个轴都有数值，例如：
transform：rotate（1，1，0，45deg）；表示往矢量方式计算旋转
如何判断旋转的方向？
左手定则：用左手拇指指向轴的正方向，手指弯曲的位置即是旋转的方向
3D呈现（transform-style）
当我们想完成下面这张图的右侧这样的效果时。我们会发现我们绕x轴旋转之后得到的效果竟然是左边这样的：
这是因为我们子元素默认是没有开启三维立体环境：transform-style：flat
其就是控制子元素是否开启三维立体环境的.(注意是子元素！！)transform-style：preserve-3d
上一篇： CSS3 3D转换
下一篇： 手把手教你做一个CSS 3D云