旋转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对象不工作的权利

回答

相关问题