Transition&transform“变形”中的H
一、transition过渡
1.1、transition-property：all;
指定可以过渡的属性值，默认的值为all.当然我们也可以设置具体的值。例如：transition-property: width；指该元素的width是要过渡的属性，我们也可以设置多个属性。transition-property：width，height；多个属性之间用逗号隔开。
1.2、transition-duration：0s;
指属性过度所需要的时间，单位是秒，其默认值是0s；结合1.1可知，transition-property：width；transition-duration：2s；表示该元素的宽度过渡所需要的时间为2s。
1.3、transition-timing-function：ease；
过渡动画的类型。默认值为ease。当然transition-timing-function的属性不知这么多。如下图所示，ease：表示先慢-快-慢，linear：表示匀速进行，ease-in：表示先快-慢，ease-out：表示先慢-快，ease-in-out：表示先慢-快-慢。
最最关键的有一个cubic-bezier曲线，在Chrome检查里面，点击tran里面的cubic-bezier会出现下图所示的样式，在这里我们可以把曲线弄成我们想要的样式。图形最上面的小球的运动轨迹就是当前我们调试的cubic-bezier曲线的运动轨迹。然后将下面的数值复制到我们的代码中就可以了。
二、transform变形
2.1、transform：translate（）；位移或者变形。
2.1.1、transform：translateX（length）；表示当前元素沿着X轴移动length长度的距离。当length为正值时表示沿着X轴正方形移动，length为负值时表示沿着X轴的负方向移动。
2.1.2、transform：translateY （length）；表示当前元素沿着 Y轴移动length长度的距离。当length为正值时表示沿着 Y轴正方形移动，length为负值时表示沿着 Y轴的负方向移动。
2.1.3、transform：translate （length，length）；表示当前元素沿着 X，Y轴移动length长度的距离。当length为正值时表示沿着X,Y轴正方形移动，length为负值时表示沿着X,Y轴的负方向移动。注意：当transform：translate （length）；只有一个值时，默认表示在X轴上移动。
2.2、transform: scale（）；缩放（适应于设置小于12px的字体大小）
2.2.1、transform: scaleX（数值）；表示在X轴方向上进行缩放。数值可以是整数可以是负值，当然也可以是小数。默认值为1；
2.2.2、transform: scale Y（数值）；表示在 Y轴方向上进行缩放。数值可以是整数可以是负值，当然也可以是小数。默认值为1；
2.2.3、transform: scale（数值，数值）；表示在X，Y轴方向上进行缩放。数值可以是整数可以是负值，当然也可以是小数。默认值为1；与tran所不同的是，scale设置一个属性值时，表示X轴Y轴上都生效。
2.3、transform：rotate（）旋转
2.3.1、transform：rotateX（deg）；表示该元素在X轴上进行旋转，当deg为正时，代表沿着顺时针旋转，为负值使表示逆时针旋转。
2.3.2、transform：rotate Y（deg）；表示该元素在 Y轴上进行旋转，当deg为正时，代表沿着顺时针旋转，为负值使表示逆时针旋转。
2.3.3、transform：rotate（deg）；表示该元素在 Z轴上进行旋转，当deg为正时，代表沿着顺时针旋转，为负值使表示逆时针旋转。
2.4、transform：skew() 倾斜 （适应于制作平行四边形）
2.4.1、transform：skewX（deg）；表示该元素沿着X轴进行倾斜，当deg为正值时，会逆时针倾斜，为负值时，沿着顺时针倾斜。
2.4.1、transform：skew Y（deg）；表示该元素沿着 Y轴进行倾斜，当deg为正值时，会逆时针倾斜，为负值时，沿着顺时针倾斜。
2.4.1、transform：skew （deg,deg）；表示该元素沿着X轴 Y轴进行倾斜，当deg为正值时，会逆时针倾斜，为负值时，沿着顺时针倾斜。
