css多张图片重叠旋转 |css单词绝对定位

.img-box {
position: relative;
width: 300px;
height: 300px;
}
.img-box img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-2 {
transform: rotate(45deg);
}
.img-3 {
transform: rotate(90deg);
}

首先，大家需要创建一个容器来包含所有的图片。在上面的代码中，容器的 class 名称为“img-box”。容器需要设置定位（position: relative;），并且设置宽度和高度。这样可以让容器成为一个相对坐标系，后面的图片都可以以容器为基准进行定位。

接下来，大家需要在容器内部添加多张图片，并且都将它们的定位方式设置为绝对定位（position: absolute;）。然后，大家通过设置 top 和 left 属性将它们垂直和水平居中。这个技巧通常被称为“水平垂直居中”。

最后，大家可以通过设置 transform 属性来对每张图片进行旋转。在上面的代码中，第二张图片的 class 名称为“img-2”，它被旋转了 45 度。第三张图片的 class 名称为“img-3”，它被旋转了 90 度。

通过这种方式，大家可以将多张图片进行重叠和旋转，从而创建出非常酷炫的效果。