今天主要给大家介绍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;}
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(延迟过度的时间，单位是秒)
今天学习到的应该就是这些，希望能够有所帮助。
