Transform 使用规范

属性定义：

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动，缩放，旋转，倾斜等。

js语法：

<style>
    element {
      transform: 具体要实现的效果 ;
    }
</style>

默认值：none

1、translate（平移）

translate有三个属性值即x轴，y轴和z轴，语法：

完整写法：transform: translateX( a px) translateY( b px);

简写：transform: translate( a px,  b px);

注意：translate可以设置正负值，Y轴与数学中的坐标轴相反

           translateZ是沿着z轴，所以平面观察是无法看出效果的，并且会影响X,Y轴效果

 

2、scale（缩放）

平面图形整体放大缩小 

写法：transform: scale(1);      默认值1，大于1放大，小于1缩小；

           transform: scaleX(1) scaleY(1);        也可以单独对x,y轴放大，缩小：

注意：可以设置负数，但不要超过-1，比如可以设置-0.5

3、rotate（旋转）

写法：transform: rotate( a deg);   a 设置正值顺时针旋转，负值顺时针旋转，deg(旋转角度)

           transform: rotateX( a deg) rotateY( a deg);      沿x和y轴旋转

4、skew（倾斜）

写法：transform: skew( xa deg,  ya deg);

           xa 沿x轴倾斜；ya 沿y轴倾斜

浏览器兼容 

菜鸟教程相关网址：CSS3 transform 属性 | 菜鸟教程 (runoob.com)