老师小星星的旋转角度，为什么没作用，rotate（angle）调了就跑偏了？

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
    /* 此处写代码*/

    div.container {
        width: 600px;
        height: 400px;
        background: red;
        margin: 100px auto;
        position: relative;
    }

    div.start {
        position: relative;
        width: 0;
        height: 0;
        margin-top: 80px;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        border-right: 100px solid transparent;
        transform: rotate(35deg);
    }

    div.start::before {
        position: absolute;
        /*content 必须有，不然不显示*/
        content: "";
        width: 0;
        height: 0;
        top: 0px;
        left: -94px;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        border-right: 100px solid transparent;
        transform: rotate(75deg);
    }

    div.start::after {
        position: absolute;
        /*content 必须有，不然不显示*/
        content: "";
        width: 0;
        height: 0;
        top: 0px;
        left: -100px;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        border-right: 100px solid transparent;
        transform: rotate(-70deg);
    }
    div.start:nth-child(1) {
        transform: scale(0.4) rotate(35deg) translate(50px,130px);
    }
    div.start:nth-child(2) {
        transform: scale(0.15) rotate(3deg) translate(350px,-1069px);

    }
    div.start:nth-child(3) {
        transform: scale(0.15) rotate(15deg) translate(150px,-1900px);
    }    
    div.start:nth-child(4) {
        transform: scale(0.15) rotate(13deg) translate(120px,-2550px);

    }    
    div.start:nth-child(5) {
        transform: scale(0.15) rotate(15deg) translate(-450px,-3200px);
    }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="container">
        <div class="start"></div>
        <div class="start"></div>
        <div class="start"></div>
        <div class="start"></div>
        <div class="start"></div>
    </div>
</body>

</html>

stonesun1314 2018-07-06

源自：CSS3转换 2-11 编程练习