css图片旋转90度

CSS（层叠样式表）是一种用于描述网页布局和外观的标记语言，它可以通过添加样式来改变元素的大小、颜色、字体和位置等。在这篇文章中，我们将学习如何通过CSS将图片旋转90度。

首先，我们需要在HTML中添加一个包含图片的元素。这可以通过使用``标签来完成，如下所示：

```html

```

在上面的代码中，我们使用了`src`属性来指定图片的路径，`alt`属性用于提供图片的替代文本，`id`属性用于给图片元素添加一个*的标识符，以便我们可以在CSS中引用它。

接下来，我们可以使用CSS来旋转图片。我们可以使用`transform`属性来实现旋转效果。`transform`属性可以使用`rotate`函数来指定旋转的角度。例如，要将图片顺时针旋转90度，我们可以将CSS代码写成以下方式：

```css

#my-image {

transform: rotate(90deg);

}

```

在上面的代码中，我们选择了ID为`my-image`的图片元素，并应用了`transform`属性，并在`rotate`函数中指定了旋转角度为90度。我们还使用了`deg`单位来表示角度。

然而，只旋转图片可能会导致其超出其容器的范围，因此我们还需要做一些调整，以确保图片能够正确显示。

```css

#my-image {

transform: rotate(90deg);

transform-origin: top left; /* 旋转原点设置为左上角 */

height: *; /* 设置图片高度为父容器的高度 */

width: *; /* 设置图片宽度为父容器的宽度 */

}

```

在上面的代码中，我们首先使用`transform-origin`属性将旋转原点设置为左上角，这样确保在旋转时图片不会偏移。然后，我们分别将图片的高度和宽度设置为父容器的高度和宽度，以便图片可以适应容器的大小。

使用以上代码，我们可以将图片顺时针旋转90度。如果我们想逆时针旋转图片，只需将角度设置为负值即可。例如，要将图片逆时针旋转90度，我们可以将CSS代码修改如下：

```css

#my-image {

transform: rotate(-90deg);

transform-origin: top left;

height: *;

width: *;

}

```

需要注意的是，在某些情况下，父容器可能需要设置`overflow: hidden`，以防止图片超出容器范围时被裁剪。

以上是通过CSS将图片旋转90度的简单方法。希望这篇文章能够帮助你了解如何使用CSS来实现这个效果。如果你对CSS的其他方面也感兴趣，可以继续学习更多相关的知识。