旋轉CSS 3D對象不工作的權利

首先，看這個的jsfiddle：http://jsfiddle.net/markasoftware/CJDeD/6/旋轉CSS 3D對象不工作的權利

  <div id="container"> 
      <figure id="box"> 
       <div id="back" class="side"></div> 
       <div id="left" class="side"></div> 
       <div id="right" class="side"></div> 
       <div id="front" class="side"></div> 
       <div id="bottom" class="side"></div> 
      </figure> 
     </div>

 body{ 
      background-color: #000000; 
     } 

     #msgline{ 
      opacity: 0; 
      transition: opacity 0.5s 1s; 
      -webkit-transition: opacity 0.5s 1s; 
     } 

     h1{ 
      margin-top: 0; 
     } 

     .side{ 
      position: absolute; 
      background-color: #c8c8c8; 
      color: darkgrey; 
      border-color: #000000; 
      border-radius: 20px; 
      border-width: thin; 
      border-style: solid; 
      text-align: center; 
     } 

     #box{ 
      height: 100%; 
      width: 100%; 
      position: absolute; 
      -webkit-transform-style: preserve-3d; 
      -webkit-transform: rotateX(-20deg); 
      transform-style: preserve-3d; 
      transform: rotateX(-20deg); 
      transition: all 1s; 
      -webkit-transition: all 1s; 
     } 

     #container{ 
      margin-top: 30px; 
      margin-left: 20%; 
      -webkit-perspective: 800px; 
      perspective: 800px; 
      height: 200px; 
      width: 400px; 
     } 

     #bottom{ 
      height: 200px; 
      width: 400px; 
      -webkit-transform: rotateX(-90deg) translateZ(100px); 
      transform: rotateX(-90deg) translateZ(100px); 
     } 

     #front{ 
      height: 200px; 
      width: 400px; 
      -webkit-transform: translateZ(100px); 
      transform: translateZ(100px); 
     } 

     #back{ 
      height: 200px; 
      width: 400px; 
      -webkit-transform: translateZ(-100px); 
      transform: translateZ(-100px); 
     } 

     #left{ 
      height: 200px; 
      width: 200px; 
      -webkit-transform: rotateY(-90deg) translateZ(100px); 
      transform: rotateY(-90deg) translateZ(100px); 
     } 

     #right{ 
      height: 200px; 
      width: 200px; 
      -webkit-transform: rotateY(90deg) translateZ(300px); 
      transform: rotateY(90deg) translateZ(300px); 
     }

 function spinit(){ 
       var box=document.getElementById('box'); 
       box.style.transform=box.style.webkitTransform='rotateX(-20deg) rotateY(360deg)'; 
      } 
     setTimeout(spinit(),1000)

它是爲了有一個開放的頂部的3D長方體。它的確如此。我也想讓它旋轉360度。我包含了一個js函數來做到這一點，但它不起作用。它適用於任何其他值，但不適用於360！我認爲它試圖通過將360轉換爲0來簡化它，因爲它對於大多數事物是相同的，但不是動畫。過去也有另外一個問題，但我想清楚了，並在下面給出了答案。動畫與其他值一起工作（例如，嘗試將360改爲180），但不是360.我想過嘗試359，但它只是向相反的方向旋轉1度。

來源

2013-02-24 Markasoftware

好吧，我討厭回答我自己的問題，但我發現爲什麼輪換的起源被搞砸了。箱體構件應該有適用於它的以下CSS屬性：

height: 100%; 
width: 100%;

新的jsfiddle是http://jsfiddle.net/markasoftware/CJDeD/6/然而，對360度rotateing問題仍然存在，那麼請回答

來源

2013-02-25 05:19:29 Markasoftware

旋轉CSS 3D對象不工作的權利

回答

相關問題