2d变形

transform:none|<transform-function>+

transform:none

transform:<transform-function>+

旋转：rotate(<angle>)

transform:rotate(45deg);左手法则：左手比赞，大拇指指向自己，其他手指所指方向为旋转方向

移动：translate(<translate-value> [,<translate-value>]?)

translateX(<translation-value>)

translateY(< translation-value>)

transform:translate(50px);

transform:translate(50px,20%);

transform:translateX(-50px);

transform:translateY(20%);

缩放：scale(<number>[,<number>]?)

只写一个值，则后一个省略的值默认等于前一个值

scaleX(<number>)

scaleY(<number>)

transform:scale(1.2);

transform:scale(1,1.2);

transform:scaleX(1.2);

transform:scaleY(1.2);

倾斜：skew(<angle>[,<angle>]?)

skewX(<angle>) Y轴向X轴方向倾斜了多少度

skewY(<angle>) X轴向Y轴方向倾斜了多少度

transform:skew(30deg);

transform:skew(30deg,30deg);

transform:skewX(30deg);

transform:skewY(30deg);

transform:<transform-function>+

transform:translate(50%) rotate(45deg);

transform:rotate(45deg) translate(50%);

transform-origin 坐标轴位置

transform-origin:50%,50%;

transform-origin:0 0;

transform-origin:20%;

transform-origin:right 50px 20px

transform-origin:top right 20px