3D 坐标系比2D 多了一个Z轴。
一定要记住3个坐标轴取值的正反：
- X 轴 往右越大，是正值， 否则反之
- Y 轴 往下越大，是正值，否则反之
- Z轴 （指向我们）越大，是正值，否则反之
3D位移
有完整写法：
transform: translate3d(x, y, z);
只不过在很多情况下，我们经常喜欢分开写：
透视
透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果
语法:
perspective: 800px;
透视注意事项：
-
取值范围经常在 800px ~ 1200px 之间。
-
一定给父亲添加
-
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是
translateZ的距离， 这个距离靠近我们，盒子越大
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
案例
body{
/* 透视 推荐值:800-1200px */
/* 透视:一般推荐给父元素添加 */
/* 透视的作用:近大远小,近实远虚的效果,要看z轴需要添加透视 */
perspective: 800px;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
}
body:hover .box{
/* 3d位移 单独写法 */
/* x轴:右正 左负 */
/* transform: translateX(100px); */
/* transform: translateX(100px); */
/* y轴:上负 下正 */
/* transform: translateY(100px); */
/* transform: translateY(-100px); */
/* z轴:面向于自己的方向正值 面向于自己的反方向负值 */
/* transform: translateZ(100px); */
/* transform: translateZ(-100px); */
/* 3D位移 综合写法 */
/* transform: translate3d(100px,200px,-400px)(x轴,y轴,z轴); */
transform: translate3d(100px,200px,-400px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3D旋转
有了透视的加持，我们3d旋转效果会比较明显。
rotateX
类似单杠旋转。
注意：默认的旋转中心在盒子的中心位置。
rotateY
类似钢管舞。
左手法则
一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。
规则：
- 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向
- 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向
案例
<style>
.box{
perspective: 800px;
width: 400px;
height: 400px;
background-color: pink;
margin: 200px auto;
}
.box img{
width: 400px;
height: 400px;
transition: all 5s;
}
.box:hover img{
/* 3d x轴 rotate 单位 deg度 turn圈 */
/* x轴正值从上往下旋转 负值从下往上 */
/* transform: rotateX(-180deg); */
/* y轴正值从左往右旋转 负值从右往左 */
/* transform: rotateY(-180deg); */
/* z轴 正值顺时针旋转 负值逆时针旋转 */
/* transform: rotateZ(-180deg); */
/* 3d旋转的综合写法了解:transform: rotate3d(x,y,z,角度); */
/* x,y,z只能取0和1 0表示不围绕这个坐标旋转 1围绕这个坐标旋转 */
transform: rotate3d(1,1,1,60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./hero.jpeg" alt="">
</div>
</body>
</html>
立体呈现
让子盒子在父盒子内有空间的展示，此时可以给父亲添加
transform-style: preserve-3d;
案例
<style>
*{
margin: 0;
padding: 0;
}
.box{
/* 相对定位 */
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 开启3d */
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover{
transform: rotateY(180deg);
}
.box div{
/* 绝对定位 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: green
}
.box .one{
transform: translateZ(100px);
}
.box .two{
background-color: red;
transform: translateZ(-100px);
}
/* 1.盒子需要层叠为一块,使用定位
2.通过位移使盒子发生间隔
3.开启3d环境(推荐给父盒子)
4.给父盒子添加向y轴的旋转方向180度,记得添加过渡 */
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
3D缩放
scaleX scaleY scaleZ
案例
<style>
body{
perspective: 1000px;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
transition: all 2s;
}
.box:hover{
/* 3d缩放 单个属性值写法 取值1以下缩小 1以上放大 1表示不变 也可以设置负值 */
/* scaleX 可以理解为盒子的宽 */
/* transform:scaleX(2); */
/* scaleY 可以理解为盒子的高 */
/* transform:scaleY(3) ; */
/* scaleZ 可以理解为面向自己的方向在进行放大,需要把盒子进行旋转 */
/* transform: scaleZ(10) rotateX(90deg); */
/*缩放的综合写法: transform: scale3d(x,y,z); 值为倍数 */
transform: scale3d(2,2,2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
