translate设置的移动与position设置的定位间区别

来源：2-9 位移变形

江舟

2021-04-29 15:53:01

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        .bgc{
            width: 900px;
            height: 600px;
            margin: 20px auto;
            background-color: red;
            position: relative;
            overflow:hidden;
        }
        .star{
            width: 0;
            height: 0;
            border: 35px solid transparent;
            border-top: 25px solid yellow;
            position: relative;
            margin:200px auto;
        }
        .star::before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 35px solid transparent;
            border-top: 25px solid yellow;
            transform: rotate(73deg) translate(-49px,40px);
        }
        .star::after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 35px solid transparent;
            border-top: 25px solid yellow;
            position: relative;
            transform: rotate(-72deg);  
            left: -17px;
            top: -97px;
        }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="bgc">
        <div class="star"></div>
    </div>
</body>

</html>

我在浏览器上更改translate的参数，发现元素移动与其朝向有关，而通过relative设置left和top后元素位置与坐标有关，上面代码中::before通过translate设置，::after通过relative设置，请问下这两个设置移动的方法有什么区别，在开发中更倾向于使用哪种，使用它的原因是什么？

写回答

1回答