2D转换

转换可以实现元素的位移——translate 旋转——rotate 缩放——scale

移动盒子的位置的三种方法：

1. 定位
2. 盒子的外边距
3. 2d转换移动

translate

语法：

tranform:translate(X,Y);
tranform:translateX(n); 只移动x坐标
tranform:translateY(n);只移动y坐标

重点：

• 定义2D转换中的移动，沿着x和y轴移动元素
• translate最大的优点：不会影响到其他原因的位置
• translate中的百分比单位是相对于自身元素的translate：（50%,50%）;
• 对行内标签没有效果

<style>
        div{
            width: 100px;
            height: 100px;
            /* translate里面的参数是可以用% */
            /* 如果里面的参数是%，移动的距离是盒子自身的宽度或者高度来对比的 */
            transform: translateX(50%);
            /* 这里的50%是50px，因为盒子宽度是100px */
        }
</style>

rotate

语法：

transform:rotate(度数)

重点：

• rotate里面的度数，单位是deg
• 角度为正时，顺时针，为负时，逆时针
• 默认旋转中心是元素的中心点

<style>
    div{
        position:relative;
        width: 249px;
        height: 35px;
        border: 1px solid #000;
    }
    div::after{
        content: "";
        position: absolute;
        top: 8px;
        right: 15px;
        width: 10px;
        height: 10px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: rotate(45deg);
        transition: all 0.2s;
    }
    /* 鼠标经过div里面的三角旋转 */
    div:hover::after{
        rotate: (225deg);
    }

transform-origin

我们可以设置元素转换的中心点

语法：

transform-origin:x y;

重点：

• 注意后面的参数x和y用空格隔开
• x y默认转换的中心点是元素的中心点（50% 50%）
• 还可以给x y设置像素或者方位名词（left right top bottom center）

scale

缩放，顾名思义，可以控制元素的缩小和放大1

语法：

transform:scale(x,y);

重点：

• 注意x和y用逗号分隔
• （1,1）：宽和高放大一倍相当于没有放大
• （2,2）：宽和高都放大了2倍
• （2）：只写了一个参数，第二个参数则和第一个参数一样，相当于（2，2）
• （0.5,0.5）：缩小
• scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子 ####综合写法 transform：translate（）rotate（）scale（）

重点：

• 顺序会影响转换的效果（先旋转会改变坐标轴方向）
• 当我们同时有位移和其他属性时，记得将位移放在最前面