2D转换-移动translate

可以改变元素在页面中的位置，类似定位。

transform:translate(x,y);

特点：

不会影响其他元素的位置
可以使用百分号，且translate中的百分比单位是相对于自身元素的translate(50%,50%);
对行内元素没有效果
经常与过渡一起使用

实现居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中垂直居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            position: relative;
            background-color: rgb(131, 0, 238);
        }
        p{
            position: absolute;
            top: 50%;
            left: 50%;
            /* 盒子往上走自己高度宽度的一半 */
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: rgb(189, 0, 0);
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

结果演示

此居中通过定位和移动来实现居中，建议使用

旋转rotate

语法：

transform:rotate(度数)

特点：

rotate里面跟度数，单位是deg，比如rotate(45deg)
角度为正值时，顺时针，反之逆时针
默认旋转的中心点是元素的中心点

设置中心点

语法：

transform-origin:x y;

特点：

x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（例如左下角：left bottom)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 0, 0);
            transition: all 0.3s;
        }
        div:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果演示