了解css3属性transform

 通过css3中transform属性，可以对元素进行移动、缩放、转动、拉长或拉伸。
Transform属性可以在二维空间使元素发生位移、缩放、旋转和斜切四类变形，也可以在三维空间进行位移、缩放和旋转。斜切是没有3D写法的。
浏览器支持：Internet Explorer 10、Chrome、Firefox 以及 Opera 支持 transform 属性。

2D
1.位移：translate（num1，num2）;两个值分别对应x和y，单位px。
X:正值表示在平面上向右移动，负值表示向左移动。
Y:正值表示在平面上向下移动，负值表示向上移动。
只在x轴或y轴移动时，可以写： translateX(num）或translateY(num2);
示例：

#box1{ width:200px; height: 200px; border:1px black solid; background-color:rgba(129, 47, 9, 0.548);margin:30px auto;}
#box2{ width:100px; height:100px; background:rgb(6, 98, 114); transition: 1s;}
#box1:hover #box2{transform:translate(-100px,50px);}

值 translate(-100px,50px) 把元素向左移动 100像素，向下移动 50像素。

2.旋转：rotate（num）;num是旋转的角度，单位deg。
正值表示元素顺时针旋转，负值表示元素逆时针旋转。二维空间的旋转表示元素绕z轴旋转，所以rotate（）与rotateZ（）是等价关系。
示例：

#box1{ width:200px; height: 200px; border:1px black solid; background-color:rgba(129, 47, 9, 0.548);margin:30px auto;}
#box2{ width:100px; height:100px; background:rgb(6, 98, 114); transition: 1s;}
#box1:hover #box2{ transform:rotate(30deg);}

值 rotate(30deg) 把元素顺时针旋转 30 度。

3.缩放：scale（num）；num是一个比例值，正常比例是1，小于1表示缩小，大于1表示放大。无单位。
scale（num1，num2）；num1表示元素的宽度缩放，num2表示元素的高度缩放。
scaleX（num）；表示只针对元素的宽度进行缩放。
scaleY（num）；表示针对元素的高度进行缩放。
示例：

#box1{ width:200px; height: 200px; border:1px black solid; background-color:rgba(129, 47, 9, 0.548);margin:100px auto;}
#box2{ width:100px; height:100px; background:rgb(6, 98, 114); transition: 1s;}
#box1:hover #box2{ transform:scale(2,3);} 

值 scale(2,3) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 3倍。

4.斜切：skew(num1,num2),两个值分别对应x和y,Num表示斜切的角度，单位deg。
skewX():表示元素只针对x轴斜切。
skewY()：表示元素只针对x轴斜切。
示例：

#box1{ width:200px; height: 200px; border:1px black solid; background-color:rgba(129, 47, 9, 0.548);margin:100px auto;}
#box2{ width:100px; height:100px; background:rgb(6, 98, 114); transition: 1s;}
#box1:hover #box2{ transform:skew(45deg,10deg);}

值 skew(30deg,60deg) 围绕 X 轴把元素翻转 45 度，围绕 Y 轴翻转 10 度。

总结：
1.所有的变形操作不会影响到其他元素。（类似于相对定位）
2.变形操作对inline内联元素不起作用。对inline元素进行变形操作时，要把内联元素转成块。（display：block;）
3.Transform可以同时设置多个值，先执行后面的操作，再执行前面的操作。 位移会受到后面要执行的（也就是写在位移前面的）缩放、旋转和斜切的影响。
变形操作一般会和鼠标移入操作搭配使用，用在做效果图，主要为了吸引用户的眼球。
3D

1. 景深：perspective（num）; 规定 3D 元素的透视效果，表示距离屏幕多远的位置去观察元素，值越大幅度越小，相当于3D眼镜。一般加在外层不动的容器上，反馈回来的立体仅限于平面。
2. rotateX(num); 元素围绕X轴进行旋转。
   rotateY(num); 元素围绕X轴进行旋转。
   示例：

#box1{ width:200px; height:200px; border:1px black solid; margin:0 auto;perspective:50px;}
#box2{ width:100px; height:100px;background:red; margin:100px; transition: 1s;}
#box1:hover #box2{ transform:rotateY(360deg);}

值rotateY(360deg)把元素在三维空间内绕Y轴旋转90度。
3. translateZ（num）;元素在Z轴向前后移动。
示例：

#box1{ width:300px; height:300px; border:1px black solid; margin:20px auto;perspective:200px;}
#box2{ width:100px; height:100px; background:red; margin:100px; transition: 1s;} 
#box1:hover #box2{ transform:translateZ(100px);}

值translateZ(100px)把元素在三维空间内绕Z轴向前移动100px。
4.scaleZ(num);表示厚度，必须是立方体，才能添加scaleZ属性。
5.transform-style:
默认值：flat（2D）
preserve-3d(3D)，产生一个三维空间。
只要是有厚度的立体图形，就必须添加3D空间。
示例：

div 
{ width:100px; height:100px; margin:100px; position: relative;transition: 4s; transform-style: preserve-3d;}

通过景深、3D变形可以实现立方体，旋转、位移等多种效果图，下面展示一个可以旋转的六边形效果。

逆战班！不忘初心，砥砺前行