css中怎么让图形旋转一圈

CSS中可以通过transform属性，实现对元素的旋转、缩放、移动、倾斜等变换效果。

让图形旋转一圈，可以使用transform的rotate()函数，给元素设置一个旋转角度即可。比如，我们需要让一个div元素旋转360度：

 div {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(360deg);
  } 

上面的代码中，rotate()函数接受一个参数，表示旋转角度，单位是度（deg）。我们把角度设置为360度，就能让元素旋转一圈了。

可以使用transition属性，为元素添加过渡效果。这样就能让元素在旋转过程中，慢慢地旋转，而不是一下子就旋转到位。比如：

 div {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(0deg);
    transition: transform 1s ease-in-out;
  }

  div:hover {
    transform: rotate(360deg);
  } 

上面的代码中，我们为div元素设置了一个过渡效果，也就是在1秒钟的时间里，将transform属性的值由初始值rotate(0deg)变为最终值rotate(360deg)。通过:hover伪类，让元素在鼠标悬停时触发旋转。

值得一提的是，rotate()函数还可以接收两个参数，分别表示旋转中心的横坐标和纵坐标。默认情况下，旋转中心是元素的中心点。如果需要指定旋转中心，可以使用transform-origin属性。例如：

 div {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(360deg);
    transform-origin: bottom right;
  } 

上面的代码中，我们将旋转中心设置在了div元素的右下角。

总之，通过transform属性和rotate()函数，我们可以非常轻松地实现图形旋转效果。而且，它不仅可以应用在普通的图形上，还可以应用在文字、图片等元素上，为页面带来更加丰富的效果。