css - 在 CSS3 中以一定 Angular 翻译图像

Question

如何在 css3 中以一定 Angular 平移图像？我知道我们可以在平移函数中给出 x 和 y 坐标，但我想从一个点径向平移多张图像，我希望对称，这就是我尝试以一定 Angular 平移的原因。

Answer 1

你可以旋转元素，在X轴上移动它，然后旋转回来，这样它就显示水平

div {
    width: 50px;
  height: 50px;
  background-color: green;
  position: absolute;
  left: 50px;
  top: 50px;
}

div:nth-child(1) {
    transform: rotate(20deg) translateX(100px) rotate(-20deg);  
}

div:nth-child(2) {
    transform: rotate(45deg) translateX(100px) rotate(-45deg);  
}

div:nth-child(3) {
    transform: rotate(70deg) translateX(100px) rotate(-70deg);  
}

<div>20</div>
<div>45</div>
<div>70</div>
<div>base</div>