html文档中图形的变形,Transition&transform“变形”中的HTML

一、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为正值时，会逆时针倾斜，为负值时，沿着顺时针倾斜。