css3 3D立方體奇怪的旋轉行爲

我有一個css3 3D立方體，我試圖讓旋轉按鈕單擊。現在它確實旋轉，但以不同的方式，然後我想。我試圖讓它立方體的位置保持不動，但旋轉到正確的一側。現在它一直在旋轉它的容器div，我不確定如何修復它。css3 3D立方體奇怪的旋轉行爲

你可以看到它的工作不完全正確這裏演示：http://jsfiddle.net/bU33f/

HTML：

<h1>Cube 2 - show sides</h1> 

<section class="container"> 
    <div id="cube" class="show-front"> 
    <figure class="front">1</figure> 
    <figure class="back">2</figure> 
    <figure class="right">3</figure> 
    <figure class="left">4</figure> 
    <figure class="top">5</figure> 
    <figure class="bottom">6</figure> 
    </div> 
</section> 

<section id="options"> 

    <p id="show-buttons"> 
    <button class="show-front">Show 1</button> 
    <button class="show-back">Show 2</button> 
    <button class="show-right">Show 3</button> 
    <button class="show-left">Show 4</button> 
    <button class="show-top">Show 5</button> 
    <button class="show-bottom">Show 6</button> 
    </p> 

    <p> 
    <button id="toggle-backface-visibility">Toggle Backface Visibility</button> 
    </p> 

</section>

CSS

.container { 寬度：200像素; height：200px; 位置：相對; margin：0 auto 40px; border：1px solid #CCC; -webkit-perspective：1000px; -moz-perspective：1000px; -o-perspective：1000px; perspective：1000px; }

#cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
      transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
     -o-transition: -o-transform 1s; 
      transition: transform 1s; 
} 

#cube figure { 
    display: block; 
    position: absolute; 
    width: 196px; 
    height: 196px; 
    border: 2px solid black; 
    line-height: 196px; 
    font-size: 120px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
} 

#cube.panels-backface-invisible figure { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
     -o-backface-visibility: hidden; 
      backface-visibility: hidden; 
} 

#cube .front { background: hsla( 0, 100%, 50%, 0.7); } 
#cube .back { background: hsla( 60, 100%, 50%, 0.7); } 
#cube .right { background: hsla(120, 100%, 50%, 0.7); } 
#cube .left { background: hsla(180, 100%, 50%, 0.7); } 
#cube .top { background: hsla(240, 100%, 50%, 0.7); } 
#cube .bottom { background: hsla(300, 100%, 50%, 0.7); } 

#cube .front { 
    -webkit-transform: translateZ(100px); 
    -moz-transform: translateZ(100px); 
     -o-transform: translateZ(100px); 
      transform: translateZ(100px); 
} 
#cube .back { 
    -webkit-transform: rotateX(-180deg) translateZ(100px); 
    -moz-transform: rotateX(-180deg) translateZ(100px); 
     -o-transform: rotateX(-180deg) translateZ(100px); 
      transform: rotateX(-180deg) translateZ(100px); 
} 
#cube .right { 
    -webkit-transform: rotateY( 90deg) translateZ(100px); 
    -moz-transform: rotateY( 90deg) translateZ(100px); 
     -o-transform: rotateY( 90deg) translateZ(100px); 
      transform: rotateY( 90deg) translateZ(100px); 
} 
#cube .left { 
    -webkit-transform: rotateY( -90deg) translateZ(100px); 
    -moz-transform: rotateY( -90deg) translateZ(100px); 
     -o-transform: rotateY( -90deg) translateZ(100px); 
      transform: rotateY( -90deg) translateZ(100px); 
} 
#cube .top { 
    -webkit-transform: rotateX( 90deg) translateZ(100px); 
    -moz-transform: rotateX( 90deg) translateZ(100px); 
     -o-transform: rotateX( 90deg) translateZ(100px); 
      transform: rotateX( 90deg) translateZ(100px); 
} 
#cube .bottom { 
    -webkit-transform: rotateX( -90deg) translateZ(100px); 
    -moz-transform: rotateX( -90deg) translateZ(100px); 
     -o-transform: rotateX( -90deg) translateZ(100px); 
      transform: rotateX( -90deg) translateZ(100px); 
} 

#cube.show-front { 
    -webkit-transform: translateZ(-100px); 
    -moz-transform: translateZ(-100px); 
     -o-transform: translateZ(-100px); 
      transform: translateZ(-100px); 
} 
#cube.show-back { 
    -webkit-transform: translateZ(-100px) rotateX(-180deg); 
    -moz-transform: translateZ(-100px) rotateX(-180deg); 
     -o-transform: translateZ(-100px) rotateX(-180deg); 
      transform: translateZ(-100px) rotateX(-180deg); 
} 
#cube.show-right { 
    -webkit-transform: translateZ(-100px) rotateY( -90deg); 
    -moz-transform: translateZ(-100px) rotateY( -90deg); 
     -o-transform: translateZ(-100px) rotateY( -90deg); 
      transform: translateZ(-100px) rotateY( -90deg); 
} 
#cube.show-left { 
    -webkit-transform: translateZ(-100px) rotateY( 90deg); 
    -moz-transform: translateZ(-100px) rotateY( 90deg); 
     -o-transform: translateZ(-100px) rotateY( 90deg); 
      transform: translateZ(-100px) rotateY( 90deg); 
} 
#cube.show-top { 
    -webkit-transform: translateZ(-100px) rotateX( -90deg); 
    -moz-transform: translateZ(-100px) rotateX( -90deg); 
     -o-transform: translateZ(-100px) rotateX( -90deg); 
      transform: translateZ(-100px) rotateX( -90deg); 
} 
#cube.show-bottom { 
    -webkit-transform: translateZ(-100px) rotateX( 90deg); 
    -moz-transform: translateZ(-100px) rotateX( 90deg); 
     -o-transform: translateZ(-100px) rotateX( 90deg); 
      transform: translateZ(-100px) rotateX( 90deg); 
}

$(document).ready(function() {  
    $("button").click(function() { 
     var currentSide = $(this).attr("class"); 

     $("#cube").removeClass().addClass(currentSide); 
    }); 
});

來源

2014-01-29 loriensleafs

我不擅長爵士，但我認爲你在幼崽中心問題。你旋轉你的立方體在它的頂點之一（我想我是capt :)）。 –

您的問題來自默認情況下適用於數字的保證金。

只需設置

#cube figure { 
    margin: 0px; 
    display: block; 
    ...

解決您的問題

fiddle

來源

2014-01-29 16:59:15 vals

下似乎解決您的問題：

-webkit-transform-origin: 50% 100%;

每個過渡類

。

http://jsfiddle.net/bU33f/1/

添加相同的其他瀏覽器應該設置你的方式:-)。

來源

2014-01-29 15:45:58 Samih

css3 3D立方體奇怪的旋轉行爲

回答

相關問題