css3transform属性
本⽂详细介绍tranform属性，通过逐步制作⼀个可转动正⽅体的例⼦介绍此属性
⾸先看下最终的效果：
1.⽤法格式
transform：字⾯解释即变形，对元素的图形进⾏转变，⽀持元素从2D向3D转换，即可展⽰3D的元素
transform的值有rotate（旋转）、skew（扭曲）、scale（缩放）、translate（平移）和matrix（矩阵变形）
本⽂介绍rotate（旋转）和translate（平移）
上述效果⽤此两个属性值即可完成，具体属性值介绍请移步MDN或W3School
2.关于图形元素从2D到3D的变换过程
我们平时使⽤css时，因为屏幕本⾝是⼀个平⾯，默认使⽤2D效果，我的理解是在⼀个只有x轴、y轴的平⾯上描绘图形，当使⽤3D效果时，可以新增操作⼀个Z轴，默认Z轴是垂直于屏幕，当我们使⽤transform的rotate控制图形时，可看到其3D效果。
3.制作旋转正⽅体
3.1⼀个旋转的正⽅形
先从⼀个简单图形开始，我们来考察下transform的rotate、translate效果，以下代码描绘⼀个渐变的正⽅形
<!DOCTYPE html>
<html lang="en">
<head>
<title>3Dbox</title>
<style>
#space {
/* background-color: black; */
}
#box {
width: 180px;
height: 180px;
background-image: linear-gradient(#e66, #36c);
margin: 180px auto;
}
</style>
</head>
<body>
<div id="space">
<div id="box">
</div>
</div>
</body>
</html>
为了更好展⽰图⽚效果，每次截取图⽚都是整个屏幕
添加⼀⾏代码到box选择器
transform: rotateX(45deg); /* 元素绕x轴正向旋转45度 */
查看效果：
（绝不是压缩！发挥下想象⼒）图⽚绕x轴旋转了45°，可看到上半部分往⾥收缩，下半部分向外翻转。
关于旋转的理解 ：前⽂提到过3D图形建⽴了x轴、y轴、z轴，默认情况下，x轴与屏幕⽔平向右，y轴垂直于x轴并向下，z轴从屏幕延伸出来垂直于屏幕，基点（3轴交汇点）在图形的正中⼼，当图形绕x轴正⽅向旋转，可看作从x轴⽅向逆时针旋转，当图形绕x轴负⽅向旋转，可看作从x轴正⽅向顺时针旋转，其他旋转效果类似。轴的⽅向随着旋转⽽改变。
为了更好体现旋转效果，我们编写⼀个⼿动控制旋转正⽅形的代码，最终效果：
⾸先编写html，在上⾯代码地基础上，添加旋转控制滚动条内容：
<div class="option">
<p>rotate x: <span id="rotatex-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
onmoumove="change()" /><br />
<p>rotate y: <span id="rotatey-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
onmoumove="change()" /><br />
<p>rotate z: <span id="rotatez-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
onmoumove="change()" /><br />
</div>
对应的样式：
.option {
width: 700px;
font-size: 16px;
font-weight: bold;
margin: 0 auto;
}
.range-control {
width: 700px;
}
新增change⽅法，⽅法的具体思路是⾸选获取input的value值，然后通过此值给box添加tranform属性并赋予相对应的rotate值，同时显⽰当前旋转值（即改变span⾥⾯的值）：
function change() {
let rotatex = ElementById("rotatex").value;
let rotatey = ElementById("rotatey").value;
let rotatez = ElementById("rotatez").value;
}
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>3Dbox</title>
<style>
#space {
}
#box {
width: 180px;
height: 180px;
background-image: linear-gradient(#e66, #36c);
margin: 180px auto;
}
.option {
width: 700px;
font-size: 16px;
font-weight: bold;
margin: 0 auto;
}
.range-control {
width: 700px;
}
</style>
<script>
function change() {
let rotatex = ElementById("rotatex").value;
let rotatey = ElementById("rotatey").value;
let rotatez = ElementById("rotatez").value;
}
</script>
</head>
<body>
<div id="space">
<div id="box">
</div>
</div>
<div class="option">
<p>rotate x: <span id="rotatex-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
onmoumove="change()" /><br />
<p>rotate y: <span id="rotatey-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
onmoumove="change()" /><br />
<p>rotate z: <span id="rotatez-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
onmoumove="change()" /><br />
</div>
</body>
</html>
3.2 展⽰平移属性
