[分享]css3怎么设置围着一点旋转

CSS3中引入了transform属性，可用于设置元素的旋转、缩放、平移等效果。为了实现围着一点旋转的效果，可以使用transformorigin和transform属性来实现。transformor...

CSS3中引入了transform属性，可用于设置元素的旋转、缩放、平移等效果。为了实现围着一点旋转的效果，可以使用transform-origin和transform属性来实现。transform-origin用于设置元素变换的原点，可以是一个像素点，也可以是一个百分比值。

首先，在HTML中设置一个div元素，并指定它的id为container。

<div id="container"></div> 

然后，在CSS中为该元素设置宽高、背景颜色和边框等样式，同时设置transform-origin为100% 50%（也就是指定旋转的原点为元素的右边中心点），并设置transform为rotate(-45deg)（即使该元素绕着右边中心点旋转45度）。

#container {
  width: 100px;
  height: 100px;
  background-color: #f00;
  border: 1px solid #000;
  transform-origin: 100% 50%;
  transform: rotate(-45deg);
} 

最终的效果如图所示：

这样，就成功地实现了围着一点旋转的效果。