如何让div围绕中心元素旋转？（TF2 Logo制作需求）

完全可以通过CSS transform的translate + rotate组合实现元素围绕指定中心点旋转，这是制作这类环绕效果的标准方案，无需额外JS函数。

核心原理 #

CSS默认的rotate是围绕元素自身中心旋转，要改成围绕外部中心点（比如你的center div），只需按以下顺序组合变换：

1. 将元素平移，让自身中心对齐到目标旋转中心点
2. 执行旋转操作
3. 将元素平移回原位置的相对位置

用代码表示就是：

transform: translate(旋转中心点X - 元素自身中心X, 旋转中心点Y - 元素自身中心Y) 
           rotate(目标角度) 
           translate(-(旋转中心点X - 元素自身中心X), -(旋转中心点Y - 元素自身中心Y));

针对TF2 Logo的修改方案 #

首先计算center div的中心点：它的left:265px、top:167px，宽高都是80px，所以中心点坐标是 (265+40, 167+40) = (305px, 207px)。

接下来调整四个角的div，让它们围绕这个中心点旋转，同时修复原动画中transform属性被覆盖的问题（多个transform声明会互相覆盖，必须合并成一个）：

修改后的CSS代码

html {
  background-color: black;
}

/* 计算center中心点：(305, 207) */
.left {
  width: 90px;
  height: 90px;
  border-radius: 12rem 0 0;
  position: absolute;
  top: 100px;
  left: 210px;
  background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
  animation: rotateAroundCenter 10s infinite;
  box-shadow: 1px 2px 2px #9d5322;
  /* 围绕center中心点旋转7度的组合变换 */
  transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px);
}

.right {
  width: 90px;
  height: 90px;
  border-radius: 12rem 0 0;
  position: absolute;
  top: 115px;
  left: 320px;
  background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
  animation: rotateAroundCenter 10s infinite;
  box-shadow: 1px 2px 2px #9d5322;
  /* 围绕center中心点旋转97度 */
  transform: translate(-15px, 52px) rotate(97deg) translate(15px, -52px);
}

.bottom {
  width: 90px;
  height: 90px;
  border-radius: 12rem 0 0;
  position: absolute;
  top: 220px;
  left: 308px;
  background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
  animation: rotateAroundCenter 10s infinite;
  box-shadow: 1px 2px 2px #9d5322;
  /* 围绕center中心点旋转187度 */
  transform: translate(-3px, -53px) rotate(187deg) translate(3px, 53px);
}

.bottom2 {
  width: 90px;
  height: 90px;
  border-radius: 12rem 0 0;
  position: absolute;
  top: 205px;
  left: 198px;
  background: radial-gradient(circle, rgba(157,83,34,1) 0%, rgba(150,78,29,1) 100%);
  animation: rotateAroundCenter 10s infinite;
  box-shadow: 1px 2px 2px #9d5322;
  /* 围绕center中心点旋转277度 */
  transform: translate(62px, -38px) rotate(277deg) translate(-62px, 38px);
}

.center {
  width: 80px;
  height: 80px;
  background-color: black;
  position: absolute;
  top: 167px;
  left: 265px;
  border-radius: 50%;
  /* 确保center在最上层 */
  z-index: 10;
}

/* 修复动画中transform覆盖问题，合并所有变换到一个声明 */
@keyframes rotateAroundCenter {
  0% {
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) translateY(10em);
    opacity: 0.1;
  }
  10% {
    opacity: 0.2;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) rotateX(50deg);
  }
  20%{
    opacity: 0.3;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) translateX(10em);
  }
  30% {
    opacity: 0.4;
    /* 这里让元素围绕center旋转360度，只需修改rotate的角度 */
    transform: translate(50px, 62px) rotate(367deg) translate(-50px, -62px);
  }
  40%  {    
    opacity: 0.5;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px);
  }
  50% {  
    opacity: 0.6;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px);
  }
  60% {    
    opacity: 0.7;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px);
  }
  70% {
    opacity: 0.8;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) translateY(30px) translateX(30px) scale(0.8) rotateX(30deg);
  }
  80% {
    opacity: 0.9;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) translateY(-30px) translateX(-30px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) translate(1em, 1em);
    box-shadow: 10px 50px 50px #9d5322;
  }
  95% {
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px) scale(1.05);
  }
  100% {
    transform: translate(50px, 62px) rotate(7deg) translate(-50px, -62px);
  }
}

修改后的HTML代码

<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="bottom2"></div>
<div class="center"></div>

关键说明 #

• 每个角的div的transform组合里，前两个translate是用来对齐旋转中心点，中间的rotate是元素的初始角度或动画角度
• 动画中所有变换必须写在同一个transform声明里，否则后面的会覆盖前面的
• 如果要让四个元素同步围绕center旋转，只需要在动画中修改rotate的角度（比如从7deg变成367deg就是旋转一圈）

内容的提问来源于stack exchange，提问作者Mippy