transition and transform

2017-11-29

##transition过渡

###有四个属性，分别为

  • trnasition-property过渡属性，指定为哪个属性设置过渡效果。默认值为all。

  • transition-duration过渡步长，即完成整个过渡需要的时间，默认0秒，可以设置小数。

  • timing-function过渡的动画效果，默认为ease，ease-in | ease-out | ease-in-out | cubic-bezier(0.99,-0.27, 0.02, 1.69)贝塞尔曲线.

  • transition-delay过渡延迟，即过多长时间开始过渡效果，默认0秒。

  • 可以分开设置，最多的都是符合写法，即transition: transition-property transition-duration timing-function transition-delay;

##transform变形

###transform:translate(x,y) | translateX( ) | transformY( );在x轴上和y轴上的位移

  • transform:translate(x,y);表示元素在x轴上位移xpx的距离，在y轴上偏移ypx距离。还可以设置负数，表示向相反方向偏移。

  • transform:translateX(); | transform:translateY();分别表示在x轴上和y轴上的偏移量。

  • transform:translate();只设置一个值的时候，表示在x轴上的偏移。
    ###transform:rotate() | rotateX() | rotateY(); 2D旋转，单位为deg，角度

  • transform:rotate();表示围绕z轴旋转一定的角度，正数表示顺时针，负数表示逆时针。

  • transform:rotateX(); | transform:rotateY();分别表示沿着x轴和y轴旋转角度。

###transform:scale(); | scaleX(); | scaleY();缩放比例或变形，zoom也可以设置缩放，但是不支持transition设置,而且不以中心点进行缩放

  • transform:scale();一个值表示沿着中心点进行缩放一定的比例。分别沿着x轴和y轴，可以设置负数，由外向里进行缩放。

  • transform:scaleX(); | scaleY();分别表示沿着x轴和y轴进行缩放一定比例。

  • 它的使用场景就是设置字体大小小于12px的字体大小。

###transiform:skew(); | skewX(); | skewY();绕着Ｘ轴和Ｙ轴进行倾斜,*这里的x轴和y轴和平时的两个轴刚好反过来

倾斜语法

还有结果图为:

倾斜结果

  • transform:skew();设置为绕着x轴进行倾斜。单位为deg角度。