transform中scale写在translate前似乎有影响
来源：2-13 编程练习
ZFB8672236
2022-09-13 10:41:24
<!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>five-star red flag</title>
<style>
.redflag {
position: relative;
width: 60vmax;
height: 40vmax;
background-color: #ee1c25;
margin: 0 auto;
}
.star, .star::before, .star::after {
/*--cos_72deg: 0.31;
--cos_36deg: 0.81;
--sin_72deg: 0.95;
--diameter: 12vmax;*/
position:absolute;
border-top: 5.71vmax solid transparent;
border-bottom: 5.71vmax solid transparent;
border-left: 4.15vmax solid #ffff00;
border-right: 4.15vmax solid transparent;
transform-origin: 1.85vmax 5.71vmax;
}
.star::before {
content: "";
display:block;
top: -5.71vmax;
left: -4.15vmax;
transform: rotate(72deg);
}
.star::after {
content: "";
display:block;
top: -5.71vmax;
left: -4.15vmax;
transform: rotate(144deg);
}
.main-star {
transform: translate(8.15vmax,4.29vmax) rotate(18deg);
}
.little-star1 {
transform: translate(18.15vmax,-1.71vmax) scale(0.33,0.33) rotate(-31deg);
}
.little-star2 {
transform: translate(22.15vmax,2.29vmax) scale(0.33,0.33) rotate(-8.1deg);
}
.little-star3 {
transform: translate(22.15vmax,8.29vmax) scale(0.33,0.33) rotate(15.9deg);
}
.little-star4 {
transform: translate(18.15vmax,12.29vmax) scale(0.33,0.33) rotate(38.7deg);
}
</style>
</head>
<body>
<div class="redflag">
<div class="star main-star"></div>
<div class="star little-star1"></div>
<div class="star little-star2"></div>
<div class="star little-star3"></div>
<div class="star little-star4"></div>
</div>
</body>
</html>在写几个little-star的transform属性时，先写scale属性(假设x,y方向值都是1/3）感觉在x,y方向也只会平移定义的translate值的1/3。
写回答
1回答
-
好帮手慕小李
2022-09-13
同学你好，首先说代码可以实现需求，很棒继续努力。
另同学可以将它们做个对比看看有没有问题如下：
但是从理论上说确实是有些不同的，因为先旋转之后在移动，会出现旋转后移动的水平坐标轴发生了变化，所以旋转之后在进行移动会出现问题，这里没有出现问题，大概率也是因为数值过小。
祝学习愉快！
0
相似问题