动画三：2D转换（超详细！）

一、了解2D转换

1.特点

2.优点

3.开启2D转换的语法及注意事项

二、2D转换的属性及其基本属性值

1.translate 平移

2.rotate() 旋转

3. transform-origin 设置变形原点

4.scale 缩放

5.skew() 倾斜

一、了解2D转换

1.特点

2D转换是通过css来改变元素的形状或位置，也可以叫做变形

2.优点

变形不会影响到页面的布局(只折腾自己)

3.开启2D转换的语法及注意事项

语法：transform: ; 用来设置元素的变形效果 ,

注意事项：尽量变形写在一个transform里，不然下面再写一个，就会覆盖上面

二、2D转换的属性及其基本属性值

变形的属性在前面也说到了transform，接下来说说transform的基本属性值

1.translate 平移

可选值：a translateX()沿着x轴方向平移

意思是说设置元素沿着水平方向平移

b translateY（)沿着Y轴方向平移

意思是说设置元素沿着垂直方向平移

c translateZ（)沿着Z轴方向平移

意思是说设置元素沿着自己的方向平移，这个看不出来，但是通过细微的观察可以发现元素变小或变大了，这也就是说明元素离你的位置变远或变近了，具体可以了解3D转换就能明白它的含义

设置内容区样式：.box {width: 500px;height: 500px;border: 1px solid red;position: relative;}.box1 {width: 100px;height: 100px;background-color: gray;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.box2 {width: 100px;height: 100px;background-color: pink;transition: all 0.5s;}.box > div {float: left;}.box2:hover {transform: translateY(-3px);box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}.box2:active {transform: translate(100px, 100px);}span:hover {color: red;/*行内元素不可以位移 */transform: translate(100px, 100px);}内容区：<div class="box"><div class="box1">box1</div><div class="box2">box2</div>  <span>乌之也而人骨意，白。</span> </div>

如图所示：box1设置了在父元素盒子中水平垂直居中，由于图片大小的缘故，所以看不出来，不过确实是居中的，这也是继使用绝对定位设置水平垂直居中的第二种设置水平垂直的方法，box2设置了向上平移了3像素，再加上设置了盒子阴影，看起来就像是盒子浮起来了一样，再加上hover效果，看上去非常美观，感兴趣的朋友可以试试，span盒子设置了平移，但是没有起作用，这是因为行内元素不可以位移

2.rotate() 旋转

可选值：a rotateX() ，元素围绕其 X 轴以设定的度数进行旋转

b rotateY() ，元素围绕其 Y轴以设定的度数进行旋转

c rotateZ() ，元素围绕其 Z轴以设定的度数进行旋转

单位：数值deg

设置内容区样式：.outer {width: 600px;height: 600px;border: 10px solid red;}.box {width: 100px;height: 100px;line-height: 100px;background-color: #bfa;margin: 10px;text-align: center;font-size: 26px;transition: all 2s;}.box:hover {transform: rotateZ(45deg);}
内容区：<div class="outer"><div class="box">1</div></div>

如图所示：设置了box旋转后，当鼠标移入box后，box果然旋转了45%

3. transform-origin 设置变形原点

可选值：a 默认值transform-origin:（center center）

b 值也可以为方向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值

4.scale 缩放

缩放属性是让元素根据中心原点对对象进行缩放。

默认值是1，这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。

缩放属性的属性值和位移属性的属性值是类似的语法，可以是一个值，也可以有两个属性值：只有一个值的时候第二个值和第一个值是相等的；两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

单独对x轴y轴进行设置：同样这里的X/Y/Z也是是需要大写的。

可选值：a transform:scaleX();

b transform:scaleY();


设置内容区样式：.box1 {width: 100px;height: 100px;background-color: #bfa;margin: 0 auto;/* 设置过渡 */transition:all 2s;}.box1:hover{transform: scaleX(2);}
内容区：<div class="box1"></div>

如图所示：设置了盒子沿着X轴放大，动画未开始时是一个正方形盒子，动画结束后放大成了长方形

5.skew() 倾斜

倾斜skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。

一个参数时：表示x轴的倾斜x角度,y轴默认为0；

两个参数时：第一个参数表示x轴的倾斜角度，第二个参数表示y轴的倾斜角度。

变形的单位是deg

可选值：a x值：为正则向左变形，为负则向右变形

b y值：为正则向上变形，为负则向下变形



设置内容区样式：.box {width: 100px;height: 100px;margin: 5px;background-color: #bfa;transition: all 2s;}.box1:hover {transform: skew(45deg, 45deg);}.box2 {background: red;}.box2:hover {transform: skewX(45deg);}.box3 {background: green;}.box3:hover {transform: skewY(45deg);}
内容区：<div class="box box1"></div><div class="box box2"></div><div class="box box3"></div>