transform以及transition

今天主要给大家介绍transform的几个变换方式如：translate scale rotate transform-origin以及skew，下面一一向大家介绍一下

1.translate

translate:变形，位移的元素高于普通文档流元素,但没有定位元素层级高

translateX 在X轴上面位移或形变

translateY 在Y轴上面位移或形变

translate 在X轴Y轴上面位移或形变，当我们只设置一个值时只有X轴生效

2.scale

scale:缩放 缩放的元素高于普通文档流元素,但没有定位元素层级高 可以设置负数，使用场景：设置小于12像素的字体

scaleX:以中心点沿X轴上进行缩放

scaleY:以中心点沿Y轴上进行缩放

scale : 以中心点进行缩放

scale（X,Y）X:以中心点沿X轴上进行缩放 Y:以中心点沿Y轴上进行缩放

3.rotate

rotate() 以中心进行旋转,正数按顺时针，负数按逆时针

rotateX() 以X轴进行旋转

rotateY() 以Y轴进行旋转

4.transform-origin

transform-origin 代表的是围绕运动的中心点

transform-origin:0 0 第一个值X轴，第二个值为Y轴 默认值为50% 50%，当只设置一个值时，他只代表X轴，而Y轴仍默认为0。

5.skew

skew 代表着倾斜的角度

下面例子说明一下，部分代码如下：

div{width:200px;height:200px;transition:all 2s;margin:150px auto;}

.div1{background-color:#f00;}.div2{background-color:#0f0;}

.div1:hover {transform:skew(0,30deg);transform-origin: left top;}

hover前

hover后

transition的用法，它具有四个值如下所示：

transition-property: all(制定可以过度的属性 默认值是all)

transition-duration: 0s(过渡完成需要的时间，单位是秒，默认值是0s,可以设置小数)

transition-timing-function: ease(过渡的动画类型)

ease-in,先慢后快，ease-out，先快后慢，linear 匀速变换，cubic-bezier(1, 2.2, 0.44, 0.07)贝塞尔曲线可以调你喜欢的动画过渡曲线

transition-delay: 0s(延迟过度的时间，单位是秒)

今天学习到的应该就是这些，希望能够有所帮助。