CSS 变换原点 + 堆叠 div

Question

我正在尝试 rotate/spin-in-place 一些堆叠 div，但是 'transform-origin' 属性使用绝对div时似乎被忽略了。

附上一个例子，div是使用堆栈class堆叠的。使用 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>

CSS 变换原点 + 堆叠 div

CSS transform-origin + stacked divs

html

css

css-animations