我有一个蓝色的家伙(蓝色角色)，我想在他周围的半圆中添加一些元素。
每个元素都是图像和应位于图像下方的一段文本的容器。
我已经尝试过了，但是正如您所看到的，元素以这种方式旋转，并且每个跨度的位置都没有正确。
我该怎么做？
.blueAnime {
width: 30vw;
height: auto;
}
.blueContainer{
display: flex;
justify-content: center;
width:100%;
padding-top:600px;
}
.coins {
width: 5vw;
height: auto;
}
.circle {
width: 300px;
height: 30px;
display: block;
position: absolute;
top: 110%;
left: 50%;
margin: -15px;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle two">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle three">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle four">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle five">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle six">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle seven">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle eight">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle nine">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle ten">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
</div>
</body>
</html>
向下滚动查看蓝色。
最佳答案
首先，让我们正确设置img和span。单个 .circle 元素应如下所示:
.circle {
display: inline-block;
text-align: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
display: block;
width: 30px; height: 30px;
margin: 0 auto;
}<div class="circle four">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>text below</span>
</div>现在我们已经设置了一个 .circle 元素，我们可以定义其中的许多元素，并适本地旋转它们:
.blueAnime { width: 30vw; height: auto; }
.blueContainer{
display: flex;
justify-content: center;
width:100%;
padding-top:300px;
}
.circle {
display: inline-block;
position: absolute;
text-align: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
display: block;
width: 30px; height: 30px;
margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle two"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle three"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle four"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle five"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle six"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle seven"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle eight"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle nine"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle ten"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
</div>请注意，.circle 元素仍然会旋转 - 我们希望它们完全水平，就像非旋转元素一样。我们可以通过在 translate 属性之前和之后使用 rotate(n) 来实现这一点!矩阵运算根据其顺序产生不同的结果。或者这里的目标是在平移和旋转 .circle 元素后“取消旋转”它。本质上，第一次旋转既在视觉上旋转了.circle，又影响了即将到来的变换的方向。然而，第二次旋转仅在视觉上“取消旋转”.circle，并且由于其后没有进行任何变换操作，因此 .circle 的中心将保持不变。
.blueAnime { width: 30vw; height: auto; }
.blueContainer{
display: flex;
justify-content: center;
width: 100%;
padding-top: 300px;
}
.circle {
display: inline-block;
position: absolute;
text-align: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
display: block;
width: 30px; height: 30px;
margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw) rotate(0deg); }
.two { transform: rotate(-20deg) translate(40vw) rotate(20deg); }
.three { transform: rotate(-40deg) translate(40vw) rotate(40deg); }
.four { transform: rotate(-60deg) translate(40vw) rotate(60deg); }
.five { transform: rotate(-80deg) translate(40vw) rotate(80deg); }
.six { transform: rotate(-100deg) translate(40vw) rotate(100deg); }
.seven { transform: rotate(-120deg) translate(40vw) rotate(120deg); }
.eight { transform: rotate(-140deg) translate(40vw) rotate(140deg); }
.nine { transform: rotate(-160deg) translate(40vw) rotate(160deg); }
.ten { transform: rotate(-180deg) translate(40vw) rotate(180deg); }<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle two"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle three"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle four"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle five"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle six"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle seven"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle eight"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle nine"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle ten"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
</div>关于javascript - 以正确的方式将元素定位在蓝色周围的半圆中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63157323/