2D效果的旋转、位移、缩放、倾斜和注意事项

2D转换

1、位移
不会脱离文档流
        transform:translate(x);水平方向位移
        transform:translate(x,y);水平垂直方向位移
        transform:translateX(100px);水平方向位移
        transform:translateY(100px);垂直方向的位移

2、旋转
        transform:rotate(60deg);正值是顺时针选转，负值是逆时针选转(默认是元素中心为中心)

    转换中心：
        transform-origin:0px 0px;数值坐标点(x,y)(宽度，高度)
        transform-origin:50% 50%;数值坐标点
        transform-origin:right bottom;方向坐标(右下角)

注意旋转中心要给元素本身加：transform-origin 要给元素本身加

3、缩放
    transform:scale(2);水平垂直都放大为原来的2倍
    transform:scale(2，0.5);水平放大为原来的2倍，垂直为原来的0.5倍
    transform:scaleX(2);水平为原来的2倍
    transform:scaleY(2);垂直为原来的2倍

注意：盒子大小和里面内容都缩放
综合使用：
1、既有位移又有选转
transform:translate(x) rotate(60deg);
2、既有旋转又有位移(如果是先旋转，x,y,z轴则会发生变化)
transform:rotate(60deg) translate(x);
3、既有缩放又有位移
transform:scaleX(1.2) translate(x);
3、既有位移又有缩放
transform:translate(x) scaleX(1.2);

4、倾斜
transform:skew(15deg); x轴方向的倾斜
transform:skewX(15deg); x轴方向的倾斜
transform:skewY(15deg); y轴方向的倾斜