2D转换transform （translate移动 rotate 旋转 scale 缩放）

transform`转换

​ translate移动

​ rotate 旋转

​ scale缩放

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

利用transform垂直水平居中

    <style>
        .box1 {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: pink; 
        }
        .box2 {
            position: absolute;
            top: 400px;
            left: 400px;
            width: 300px;
            height: 300px;
            background-color: purple;
            transform: translate(-50%,-50%);
        } 
    </style>

    <div class="box1">
        <div class="box2"></div>
    </div>

旋转

<style>
        div {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 300px;
            height: 300px;
            background-color: pink;
            transform: rotate(45deg);
        }
    </style>

<div></div>

过度加旋转

        div {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 300px;
            height: 300px;
            background-color: pink;
            transform: rotate(45deg);
            /* transition过度 */
            transition: all 0.5s;
        }
        div:hover {
            transform: rotate(-45deg); 
        }