想要用rotate控制小星星的角度，但都不起作用，为什么
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
div{
width:300px;
height:200px;
background:red;
position:relative;
}
div > div{
position:absolute;
width:0;
height:0;
margin-left:40px;
margin-top:20px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:30px solid yellow;
transform:translate(40px,20px);
transform:scale(0.8);
}
/*.star1::before,.star1::after{*/
div >div::before{
content:'';
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:25px solid yellow;
position:absolute;
margin-left:-40px;
margin-top:25px;
transform:-webkit-rotate(-35deg);
transform:-moz-rotate(-35deg);
transform:-ms-rotate(-35deg);
transform:-o-rotate(-35deg);
transform:rotate(-35deg);
}
div > div::after{
content:'';
display:block;
width:0;
height:0;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:25px solid yellow;
position:absolute;
margin-left:-40px;
margin-top:25px;
transform:-webkit-rotate(-70deg);
transform:-moz-rotate(-70deg);
transform:-ms-rotate(-70deg);
transform:-o-rotate(-70deg);
transform:rotate(35deg);
transform:scale();
}
.star{
transform:scale(0.3);
}
.star2{
margin-top:3px;
margin-left:90px;
transform:rotate(-30deg);
}
.star3{
margin-top:26px;
margin-left:110px;
}
.star4{
margin-top:56px;
margin-left:105px;
}
.star5{
margin-top:86px;
margin-left:88px;
}
</style>
</head>
<body>
<div>
<div></div>
<div class = 'star star2'></div>
<div class = 'star star3'></div>
<div class = 'star star4'></div>
<div class = 'star star5'></div>
</div>
</body>
</html>
正在回答
希望可以帮到你~
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星