css3 2D变形 笔记（详细）

2D变形

 

transform ：变形

transform的属性

旋转： rotate( ) 

旋转正方形：顺时针；单位：deg（旋转的度数）

transform: rotate(30deg);

缩放：scale（ ） 

放大：属性值1 - 无穷  不书写单位

缩小：0 - 1    不书写单位

transform: scale(1.3);

斜切：skew（ ）

第一个参数：水平方向斜切

第二个参数：垂直方向斜切

单位deg，用逗号隔开两个参数

transform: skew(10deg,10deg);

空间移动：translate（x, y）

水平空间移动：translateX

垂直方向移动：translateY

相对于自身移动

 

transform: translateX(100px); 正方向→右

transform: translateY(100px);正方形→下

一个元素可以有多个变形，需要用逗号隔开。没有变形用none

transform: rotate(50deg) scale(0.2) skew(20deg,5deg) translate(50px,50px);

可以添加过渡实现动画效果

transition: all  2s linear 0s;