        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(500px, 200px);

            /* 只移动y轴，x轴为0 */
            transform: translateY(300px);
        }

重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响其他元素的位置
translate中的百分比单位都是相对于自身元素宽度或者高度的translate(50%，50%);
对行内标签没有效果

让盒子实现水平居中和垂直居中

/* 盒子往上走自己高度的一半往左走自己宽度的一半 */

transform: translate(-50%, -50%);

    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: palegoldenrod;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(-50%, -50%);
        }
    </style>

2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

语法：translate：rotate(度数deg）；

重点：

rotate里面跟度数，单位是deg，比如rotate（45deg）；
角度为正，顺时针，负，逆时针
默认选择的中心点是元素的中心的

        img {
            width: 150px;
            transform: rotate(-30deg);
        }

旋转案例-小三角

    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid rgb(21, 20, 20);
        }

        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 .5s;

        }

        /* 鼠标经过div 里面的三角旋转 */

        div:hover::after {
            transform: rotate(225deg);
            top: 15px;
        }
    </style>

设置转换中心点transform-origin

语法：transform-origin：x y；

重点：

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

            /*1. 可以跟方位名词 */
            transform-origin: left bottom;

            /* 2.默认是50%  50%  等价于center center */
            /* 3.可以是px像素 */
            transform-origin: 50px 50px;

旋转中心点案例

    <style>
        .fa {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid pink;
            overflow: hidden;
        }

        .son {
            transform: rotate(90deg);
            transform-origin: left bottom;
            transition: all 1s;
        }

        .son img {
            width: 165px;
        }

        .fa:hover .son {
            transform: rotate(0);
        }
    </style>

<body>
    <div class="fa">
        千万别点这个盒子！
        <div class="son">
            <img src="../第9天/shopping/images/别看了说的就是你.JPG" alt="">
            <p>别点</p>
        </div>
    </div>
</body>

2D转换之缩放scale

语法：transform：scale(x,y); x是宽度，y是高度

注意：

其中的x和y用逗号隔开
不跟单位，1就是1倍（不变），2就是2倍
transform：scale(2)；等比例放大两倍

优势：

不会影响其他的盒子
可以设置缩放的中心点，默认以中心点缩放的

图片放大案例

    <style>
        div {
            float: left;
            margin: 10px;
            overflow: hidden;
            background-color: beige;
        }

        div img {
            transition: all 1s;
        }

        div img:hover {
            transform: scale(1.2);
        }
    </style>

分页按钮案例

鼠标经过数字，数字缩放

    <style>
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid blue;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            list-style: none;
            margin: 10px;
            cursor: pointer;
            transition: all .5s;
        }

        ul li:hover {
            transform: scale(1.2);
        }
    </style>