[分享]css两张图片旋转

在网站设计中，图片是非常常见的元素。而对于一些个性化的设计，往往需要对图片做一些特殊处理。本文将介绍如何使用 CSS 旋转两张图片。首先，我们需要在 HTML 中添加两张图片： 接下来，在 CSS ...

在网站设计中，图片是非常常见的元素。而对于一些个性化的设计，往往需要对图片做一些特殊处理。本文将介绍如何使用 CSS 旋转两张图片。

首先，我们需要在 HTML 中添加两张图片：

<img class="rotate-left" src="image1.jpg" alt="Image 1">
<img class="rotate-right" src="image2.jpg" alt="Image 2"> 

接下来，在 CSS 中使用 transform 属性实现图片旋转：

.rotate-left {
  transform: rotate(-15deg);
}

.rotate-right {
  transform: rotate(15deg);
} 

这里我们使用了 rotate() 函数进行旋转，参数为旋转的度数。为了让图片倾斜一些，我们将每张图片旋转了 15 度。

最后，我们再添加一些样式来让图片显示得更好看：

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
} 

这里我们将图片设置为块级元素，让它们水平居中显示。还设置了最大宽度和自动高度，以适应不同的屏幕尺寸。

通过上述步骤，我们已经完成了两张图片的旋转。如果需要更多个性化设计，可以在样式中添加更多的属性来调整。希望本文能帮助到你。