[分享]css做图形围绕中心点坐旋转

在网页设计中，我们经常会使用 CSS 来进行图形的样式调整。其中，旋转图形是一种非常常见的效果，可以让页面变得更加炫酷。本文将介绍如何使用 CSS 在中心点坐旋转图形。首先，我们需要了解一些关于旋转的...

在网页设计中，我们经常会使用 CSS 来进行图形的样式调整。其中，旋转图形是一种非常常见的效果，可以让页面变得更加炫酷。本文将介绍如何使用 CSS 在中心点坐旋转图形。

首先，我们需要了解一些关于旋转的基础知识。在 CSS 中，我们可以通过 transform 属性来实现旋转效果。对于图形的旋转，我们需要指定旋转角度和旋转中心点。

/* 旋转 45 度 */
transform: rotate(45deg);

/* 以左上角为中心点旋转 */
transform-origin: top left; 

接下来，我们将以一个正方形为例来演示如何绕中心点旋转。假设我们有一个 div 元素，宽高都为 100px，并且添加了以下样式：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
} 

这样，我们就得到了一个蓝色的正方形。现在，我们希望将它绕正中心旋转 45 度。

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: rotate(45deg);
  transform-origin: center;
} 

通过添加 transform 和 transform-origin 属性，我们将这个正方形沿着中心点旋转了 45 度。同时，我们还可以通过改变旋转角度来调整旋转效果：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: rotate(90deg);
  transform-origin: center;
} 

当旋转角度为 90 度时，正方形就变成了一个横向的矩形。

除了正方形，我们还可以绕中心点旋转其他形状。例如，绕中心点旋转一个三角形：

div {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
  transform-origin: center;
} 

通过添加 border 相关属性，我们得到了一个红色的三角形，并通过 transform 属性将它绕中心点旋转了 45 度。

总之，使用 CSS 绕中心点旋转图形是一种非常常见的效果。通过掌握 transform 和 transform-origin 属性，我们可以轻松地实现这个效果，并大大提升网页的视觉效果。