transform2D变换

1‘、平移

p{
    transform:translateX(10px);
}

p{
    transform:translateY(10px);
}

p{
    transform:translate(x,y);
}

正值向左上方平移，负值向右下方平移

2、缩放

p{
    transform:scaleX(0.5)
}

p{
    transform:scaleY(0.5)
}

取值范围0~1，超出则放大。负值为镜像

3、旋转

p{
    transform:rotateX(10deg);
}

p{
    transform:rotateY(10deg)
}

4、倾斜

p{
    transform:skewX(10deg)
}

p{
    transform:skewY(10deg)
}

拉伸旋转，不会超出高度

5、变换原点

p{
    transform-origin:10%/10px/left/center/top;
}

6、过渡效果

transition-property   指定过渡的属性   all表示全部

transition-duration   指定过渡时间

transition-timing-function   指定过渡效果（ease溶解效果；linear渐变效果；ease-out淡出；ease-in淡入；ease-in-out淡入淡出效果）

transition-delay   指定过渡延迟

7、缩写

transition：all 过渡时间 过渡延迟