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

一个要素不能应用到它的多个transform秒。既然你在动画中有一个transform，它将覆盖你的旧的一个

你的选择是要么添加一个容器元素和动画应用到或手动添加原转化为动画的变换

Demo第二个选项的

见this SO question以获取更多信息