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

一个元素不能应用多个transform。由于动画中有transform，因此它会覆盖旧版

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

Demo第二个选项

有关详细信息，请参阅this SO question

css旋转变形对象

1 个答案: