CSS3-3D转换
目录
1.1三维坐标系
1.2 3D移动translate3d
1.3 透视perspective
1.4 3D旋转 rotate3d
1.5 3D呈现 transform-style
2.1两面翻转盒子案例
3D导航栏
旋转木马
有什么特点
-
近大远小
-
物体后面遮挡不可见
1.1三维坐标系
-
x轴：水平向右 注意：x右边是正值，左边是负值
-
y轴：水平向下 注意：y下边是正值，上边是负值
-
z轴：垂直屏幕 注意：往外面是正值，往里面是负值
主要知识点
-
3D位移：translate3d（x，y，z）
-
3D旋转：retate3d（x，y，z）
-
透视：perspective
-
3D呈现：transfrom-style
1.2 3D移动translate3d
-
transform:translateX(100px):仅仅在x轴上移动
-
transform:translateY(100px):仅仅在Y轴上移动
-
transform:translateZ(100px):仅仅在Z轴上移动（translateZ一般用px单位）
-
transform：translate3d（x，y，z）：其中x、y、z分别指要移动的轴的方向的距离
-
xyz是不能省略的，如果没有就写0
1.3 透视perspective
在2D平面产生近大远小视觉立体，但是只是二维效果的
-
如果想要在网页产生3D效果需要透视（理解为3D物体投影在2D平面内）
-
模拟人类的视觉位置，可以安排一只眼睛去看
-
透视我们也称作视距：视距就是人的眼睛到屏幕的距离
-
距离视觉点月近的在电脑平面成像越大，越远成像越小
-
透视的单位是像素
近大远小：
d：就是视距，视距就是人的眼睛到屏幕的距离
z：就是z轴，物体距离屏幕的距离，z为正值时，z轴越大我们看到物体越大。z为负值时，z轴越大我们看到的物体越小。
透视写在被观察元素的父盒子上面
<style>body {/* 盒子没了的原因是因为透视距离比盒子z轴移动要小 */perspective: 200px;}div {width: 200px;height: 200px;background-color: yellow;/* xyz是不能省略的，如果没有就写0 */transform: translate3d(500px, 200px, 100px);}</style> <body><div></div></body>1.4 3D旋转 rotate3d
rotatex
左手准则
-
左手的拇指指向x轴正方向
-
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
<style>body {perspective: 300px;}img {display: block;margin: 100px auto;transition: all 2s;}img:hover {transform: rotatex(360deg);}</style><