一.空间转换（transform）
使用transform属性实现在空间内的位移、旋转、缩放等效果
（1） 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同（x轴正方向向右，y轴正方向向下，z轴正方向向后，即为靠近自己的方向）。
（2） 空间转换也叫3D转换
（3）属性：transform
注意事项：transform属性同一个类里不能同时出现两行，否则会出现覆盖现象。
1.空间位移
语法
（1）transform: translate3d(x, y, z);
（2）transform: translateX(值);
（3）transform: translateY(值);
（4）transform: translateZ(值);
取值（正负均可）
（1）像素单位数值
（2）百分比（相对于自身的长度的百分比）
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*
视距 一般随意的设置1000
一般给父元素添加
*/
perspective: 1000px;
}
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url("../day01/images/258f8d4142885c10.jpg.jpg");
background-size: contain;
/* transform: translate3d(100px,100px,100px); */
margin: 100px auto;
/* transform: rotateY(60deg); */
/* transform: rotateZ(60deg); */
/* transform: rotateX(60deg); */
transform: rotate3d(1,1,1,60deg);
}
</style>
</head>
<body>
<div>空间位移</div>
</body>
</html>
2.透视 （perspective）
目标：使用perspective属性实现透视效果 （实现视觉上的3D效果，实际上未能使子元素真正处于3D空间）
（1）思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊
（2）思考：默认情况下，为什么无法观察到Z轴位移效果？
答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
1.属性（添加给父级）
perspective: 值;
2.取值：像素单位数值， 数值一般在800 – 1200。
3.作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果
body {
/*
视距 一般随意的设置1000
一般给父元素添加
*/
perspective: 1000px;
}
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url("../day01/images/258f8d4142885c10.jpg.jpg");
background-size: contain;
/* transform: translate3d(100px,100px,100px); */
margin: 100px auto;
/* transform: rotateY(60deg); */
/* transform: rotateZ(60deg); */
/* transform: rotateX(60deg); */
transform: rotate3d(1,1,1,60deg);
}
3.空间旋转
目标：使用rotate实现元素空间旋转效果
l.语法
（1）transform: rotateZ(值); （以前后方向为轴）
（2）transform: rotateX(值); （以左右方向为轴）
（3）transform: rotateY(值);（以上下方向为轴）
（4）rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
2.左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。 实现边旋转边位移（参考车轮）的代码如下（ 旋转会影响当前元素所在的坐标系：强烈建议：先移 动再旋转）：
transform: translateZ(-100px) rotateY(180deg);
/*transform: rotateY(180deg) translateZ(100px);*/
4.立体呈现 （3D模型）
目标： 使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法
1.添加 transform-style: preserve-3d; （父元素添加）
2.按需求设置子盒子的位置（位移或旋转）
作用 使子元素处于真正的3d空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
input {
width: 50px;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
/* 给box开辟3D空间 */
transform-style: preserve-3d;
perspective-origin: 0px 0px;
transform: rotate3d(1, 1, 1, 30deg);
}
.box > div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
opacity: 0.9;
font-size: 30px;
}
::input-selection {
background-color: #000;
color: #fff;
}
.front {
background-color: #ff1703;
}
.back {
background-color: #ffc629;
}
.left {
background-color: #53ff27;
}
.right {
background-color: #18ffe4;
}
.top {
background-color: #0c00ff;
}
.bottom {
background-color: #ff21cb;
}
/*将第一个div前移*/
.front {
transform: translateZ(100px);
}
/*第二个div后移*/
.back {
transform: translateZ(-100px) rotateY(180deg);
/*旋转会影响当前元素所在的坐标系：强烈建议：先移动再旋转*/
/*transform: rotateY(180deg) translateZ(100px);*/
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
body {
perspective: 1000px;
}
</style>
</head>
<body>
<div class="box">
<div class="front">前面</div>
<div class="back">后面</div>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="top">上面</div>
<div class="bottom">下面</div>
</div>
</body>
</html>
5.空间缩放
目标：使用scale实现空间缩放效果
语法
（1） transform: scaleX(倍数);
（2） transform: scaleY(倍数);
（3） transform: scaleZ(倍数);
（4） transform: scale3d(x, y, z);
