css旋转变换的对象

Question

html

<div class="camera">
  <div class="dreid">
    <div class="planet1"></div>
    <div class="planet2"></div>
  </div>
</div>

css

.camera {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 700px;
}
.dreid {
  width:220px;
  height:220px;
  border-radius: 50%;
  border: 1px solid black;
  margin: 60px auto;
  -webkit-transform: rotateX(45deg);
  -webkit-animation-name: spin;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;  

}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
  }
}
.planet1 {
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:red;
  border-radius:50%;
}
.planet2 {
  position: absolute;
  top:170px;
  left:170px;
  width:50px;
  height:50px;
  background:red;
  border-radius:50%;
}

如您所见，我尝试在旋转之前将透视应用于圆（有点像在行星系统中）。问题是，动画位似乎覆盖了我用 -perspective 和 -transform:rotate 设置的变换位。有没有可能用纯css完成？

编辑：JSFiddle

Answer 1

一个元素不能应用多个transforms。因为你在动画中有一个transform，它会覆盖你的旧的

您的选择是添加一个容器元素并将动画应用于该元素，或者手动将原始变换添加到动画的变换中

Demo第二个选项

更多信息请见this SO question