旋轉並保存3d不工作

Question

如果停止動畫旋轉和保存3d工作，動畫工作但#sun旋轉不與保存3d。如何製作動畫和所有旋轉？

HTML：

<div class="holder"> 
    <div class="system"> 
     <img src="image/sun.png"class="objects" id="sun"> 
    </div></div> 

的CSS：

.holder{width:40%;height:50%;margin-left:10%;margin-top:10%;position:relative; 
     -ms-transform:rotateX(75deg); 
    -moz-transform:rotateX(75deg); 
    -webkit-transform:rotateX(75deg); 
     -webkit-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
     } 
.system{ 
    position:relative;height:100%;width:100%; 
    -webkit-animation: orbit 5s linear infinite; 
-moz-animation: orbit 5s linear infinite; 
    animation: orbit 5s linear infinite; 
} 
#sun{transform:rotateX(75deg);width:8%;height:10%;position:relative; 
-ms-transform:rotateX(75deg); 
    -moz-transform:rotateX(75deg); 
    -webkit-transform:rotateX(75deg); 
} 
@-webkit-keyframes orbit { 
      from { 
      -webkit-transform: rotateZ(0deg); 
      } 

      to { 
      -webkit-transform: rotateZ(360deg); 
      } 
     } 

Answer 1

通常當你與像thse改造工作，我認爲你需要對你的主要DIV的透視。

，如：

body{ 
-webkit-perspective: 500px; /* Chrome, Safari, Opera */ 
perspective: 500px; 
} 

Answer 2

演示：http://codepen.io/Alesso05/pen/vEdfJ

這不是運行：

#holder{ 
     -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
     } 
     #sun{ 
      transform:rotateX(75deg); 
-ms-transform:rotateX(75deg); 
    -moz-transform:rotateX(75deg); 
    -webkit-transform:rotateX(75deg) ; 
}