css3 变形
transform属性语法：
transform：none | <transform-function> [<transform-function>]*
可用于内联和块元素。默认值为none，表示元素不变形。另一个属性是变形函数，可以有多个。
常用的2D变形函数：
translate():移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY()。
scale():缩小或放大元素，可以使元素尺寸发生变化。在此基础上有两个扩展函数scaleX()和scaleY():。
rotate():旋转元素。
skew():让元素倾斜。在此基础上有两个扩展元素skewX()和skewY()。
matrix():定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。
常用的3D变形函数：
translate3d():移动元素，用来指定一个3D变形移动位移量。
translateZ():指定3D位移在Z轴的位移量。
scale3d():缩放一个元素。
scaleZ():指定Z轴的缩放向量。
rotate3d():指定元素具有一个三维旋转的角度。
rotateX(),rotateY(),rotateZ():让元素具有一个旋转角度。
perspective():指定一个透视投影矩阵。
matrix3d():定义矩阵变形。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
#div{
box-sizing:border-box;
margin:0 auto;
200px;
height:100px;
border:solid;
position:relative;
}
#div div{
50px;
height: 50px;
background: #ffd800;
/*X轴偏移100px*/
transform: translate(100px);
}
</style>
</head>
<body>
<div id="div">
<div></div>
</div>
</body>
</html>
#div div{
50px;
height: 50px;
background: #ffd800;
/*按比例放大1.5倍*/
transform:scale(1.5);
}
#div div{
50px;
height: 50px;
background: #ffd800;
/*顺时针旋转45度*/
transform:rotate(45deg);
}
#div div{
50px;
height: 50px;
background: #ffd800;
/*x轴倾斜30度*/
transform:skew(30deg);
}
transform-origin属性：用来指定元素的中心位置，默认变形的原点在元素的中心点。2D变形中可接受X轴与Y轴的位置，3D变形还包括Z轴三个值。可用关键词，长度值与百分比，不能影响transform-translate变形。
#div div{
50px;
height: 50px;
background: #ffd800;
/*修改变形起点为左上角*/
transform-origin:left top;
transform:rotate(30deg);
}
transform-style属性：指定嵌套元素如何在3D空间中呈现。主要有两个值，flat(默认，表示所有子元素在2D平面呈现)，preserve-3d(所有子元素在3D平面呈现)。
perspective属性：该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D平面上，简单理解为，用来设置用户和元素3D空间Z轴平面之间的距离。其效应由他的值决定，值越小，用户与3D空间Z平面距离越近，否则，越远。如果不指定透视，则Z轴空间中的所有点将平铺在同一个2D平面中。
perspective-origin属性：用来决定perspective属性的源点角度。
backface-visibility属性：决定元素旋转背面是否可见。有二个值，visible(默认，可见)，hidden(隐藏)。