css transform

一、transform

1.旋转rotate

• 2D平面旋转

transform: rotate(25deg); 

2.移动translate

• 水平偏移150px 数值偏移50px

transform: translate(150px,50px)

• 水平偏移150px

transform: translateX(150px);

• 竖直偏移50px

transform: translateY(50px);

3.扭曲skew

• 两个参数：x y

transform: skew(0,30deg);

• x

transform: skewX(30deg)

• y

transform: skewY(30deg)

4.放大缩小scale

• scale 大于1就放大 小于1就缩小
• 只有一个参数的时候表示x,y轴同时操作
• 配合:hover使用,当鼠标悬空时，会有放大或缩小的动画

transform: scale(0.5);

• x

transform: scaleX(1.2);

• y

transform: scaleY(1.2);

5.改变元素基点transform-origin

• 在进行transform动作之前可以改变元素的基点位置

• 没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

transform-origin:(left,top);

transform-origin:right

transform-origin(25%,75%);

6.当使用多个时，用空格隔开

• 偏移并扭曲

transform: translate(150px,50px) skew(0,30deg);