Question

如何在css3中以一定角度翻译图像？我知道我们可以在translate函数中给出x和y坐标，但是我想从一个点径向平移几个图像，我想要对称，这就是我试图以一定角度进行平移的原因。

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>

Answer 2

css $属性接受几个不同的操作元素选项。

您确实如您所提到的transform属性，您可以在3轴（x，y，z）中移动图像，但如果要为translate添加角度，则可以使用旋转属性，如下所示：

transform

您还可以添加更复杂的旋转，例如3d旋转：

transform: rotate(15deg);

有关详细信息，您可以在http://www.w3schools.com/cssref/css3_pr_transform.asp

上查看转换属性的文档

在CSS3中以一定角度翻译图像

2 个答案: