[分享]css中心点和旋转冲突

CSS中心点和旋转是常用的样式属性，但在使用它们的时候也有可能发生冲突。下面我们就来详细了解一下。

 .box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  } 

代码中，我们在元素.box上设置了绝对定位，然后用top和left属性同时将它放在浏览器中心位置。接着使用transform属性将元素旋转45度。但是在上面的代码中，我们发现元素旋转后并没有围绕中心点旋转。

这是因为，当我们设置了元素的位置为中心位置后，使用 transform 对它进行旋转时，它会默认以原点为中心进行旋转。因此，我们需要额外添加一个 transform：translate(-50%,-50%); 属性来指定旋转的中心为元素的中心点。

 .box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: 50% 50%;
  } 

在上面的代码中，我们添加了一个 transform-origin属性来定义元素旋转的中心点。这里将中心点设置为50% 50%，即元素的中心点。这样，当旋转角度发生变化时，元素就会围绕中心点旋转。

CSS中心点和旋转的冲突是个常见问题，但在使用时我们只需要注意这两个属性之间的关系，就可以避免出现旋转不准确的情况。