缩放后旋转失效

首页课程实战体系课手记专栏慕课教程

缩放后旋转失效

来源：2-13 编程练习

weibo__没趣味_03683219

2021-06-11 14:52:58

问题描述：

老师好，我的四个小星星都是正的，旋转属性没有生效，

先缩放后旋转的话缩放就失效了，这种情况应该怎么解决？

相关代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        .flag {
            width:600px;
            height:400px;
            background:red center;
            position: relative;
        }
        .flag .star {
            position: absolute;
            width:0;
            height:0;
            border:30px solid transparent;
            border-top:15px solid yellow;
        }
        .flag .star::before {
            content:"";
            position: absolute;
            width:0;
            height:0;
            top: -32px;
            left: -8px;
            border:30px solid transparent;
            border-left:15px solid yellow;
            transform: rotate(16deg);
        }
        .flag .star::after {
            content:"";
            position: absolute;
            width:0;
            height:0;
            top: -32px;
            left: -35px;
            border:30px solid transparent;
            border-right:15px solid yellow;
            transform: rotate(-16deg);
        }
        .flag .star:nth-child(1) {
            top: 30px;
            left: 165px;
            transform: rotate(25deg);
            transform: scale(0.5);
        }
        .flag .star:nth-child(2) {
            top: 70px;
            left: 225px;
            transform: rotate(40deg);
            transform: scale(0.5);
        }
        .flag .star:nth-child(3) {
            top: 145px;
            left: 225px;
            transform: rotate(65deg);
            transform: scale(0.5);
        }
        .flag .star:nth-child(4) {
            top: 200px;
            left: 165px;
            transform: rotate(80deg);
            transform: scale(0.5);
        }
        .flag .star:nth-child(5) {
            top: 140px;
            left: 70px;
            transform: scale(2.5);
        } 
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="flag">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
    </div>
</body>
</html>