html - CSS transform-origin + 堆叠 div

Question

我正在尝试旋转/就地旋转一些堆叠 div，但是在使用绝对 div 时似乎忽略了“transform-origin”属性。

附件是一个示例，div 使用堆栈类进行堆叠。使用 SVG 会是更好的解决方案吗？

.circle {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  border: 50px solid white;
  margin: auto;
}

body {
  background: black;
  overflow: hidden;
}

.circle_one {
  animation: rotateY 3s infinite linear;
}

.circle_two {
  animation: rotateX 2s infinite linear;
}

.spinMe {
  animation: spinMe 2s infinite linear;
  transform-origin: 50% 50%;
}

.stack {
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes rotateY {
  to {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateX {
  to {
    transform: rotateX(360deg);
  }
}

@-webkit-keyframes spinMe {
  to {
    transform: rotate(360deg);
  }
}

<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>  
</div>

Answer 1

问题是 spinMe 元素由于绝对定位的子元素而具有 100% 宽度和零高度。如果你给 spinMe 一个定义的宽度和高度等于 .circle 它工作正常。

.circle {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  border: 50px solid white;
  margin: auto;
}

body {
  background: black;
  overflow: hidden;
}

.circle_one {
  animation: rotateY 3s infinite linear;
}

.circle_two {
  animation: rotateX 2s infinite linear;
}

.spinMe {
  animation: spinMe 2s infinite linear;
  transform-origin: 50% 50%;
  width: 350px;
  height: 350px;
}

.stack {
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes rotateY {
  to {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateX {
  to {
    transform: rotateX(360deg);
  }
}

@-webkit-keyframes spinMe {
  to {
    transform: rotate(360deg);
  }
}

<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>  
</div>