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以獲取更多信息