CSS3的效果不起作用

如果我試圖做出只有css3的翻轉效果，並且可以在所有主流瀏覽器中使用，那麼我會失敗。CSS3的效果不起作用

anaxshipping.com/site是網址，翻轉效果是在三個頂部圖標的主頁。

-webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -ms-perspective: 1000; 
    perspective: 1000; 

-webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    transform: rotateY(180deg);

我也嘗試過與px的視角。在鉻它的作品。在Mozilla中它不是。我應該粘貼其餘的代碼嗎？

/* entire container, keeps perspective */ 
.flip-container { 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -ms-perspective: 1000px; 
    perspective: 1000px; 
} 

/* flip the pane when hovered */ 
.flip-container:hover .flipper, .flip-container.hover .flipper { 

    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.flip-container, .front, .back { 
// width: 100%; 
// height: 21em; 
    width: 320px; 
    height: 480px; 
} 

/* flip speed goes here */ 
.flipper { 

    -webkit-transition:0.6s; 
    -moz-transition:0.6s; 
    -ms-transition:0.6s; 
    transition: 0.6s; 
-webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 

    z-index: 2; 
} 

/* back, initially hidden pane */ 
.back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
}

來源

2014-07-14 DrNio

Firefox 30 - 正常工作。 –

我也有最新的Firefox我清除了瀏覽器緩存......所以爲什麼我會在翻轉效果中看到一個「bug」？ – DrNio

是的，粘貼其餘的代碼。 –

爲3D動畫，使用這種排序：
（爲了更好地實現我寫的嵌套形式）

#world { 
    perspective: 1000px; //px needed 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000px; //px needed 

    #container { 
     transform-style: preserve-3d; 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 

     .elements { 
      transform: ... ; 
      -webkit-transform: ... ; 
      -moz-transform: ... ; 
     } 

    } 

}

來源

2014-07-15 15:58:49

.flip容器，.front，.back {

-moz-transform-style：preserve-3d; }

我在那裏添加了Mozilla的preserve-3d，它工作。

謝謝您的反饋！

來源

2014-07-25 17:08:55 DrNio

CSS3的效果不起作用

回答

相關問題