CSS 3d透視關閉

我試圖讓一個懸掛在CSS中的3d轉換功能。我的代碼在這裏直接從教程中直接複製，因爲無論我多麼努力，我都無法正常工作。鏈接到它是如何應該看起來是：http://desandro.github.com/3dtransforms/examples/card-01.html CSS 3d透視關閉

，我的代碼是：

<html> 
    <head> 
     <style media="screen">  
      .container { 
       width: 200px; 
       height: 260px; 
       position: relative; 
       -webkit-perspective: 800; 
       } 
      #card { 
       width: 100%; 
       height: 100%; 
       position: absolute; 
       -webkit-transform-style: preserve-3D; 
       -webkit-transition: -webkit-transform 2s; 
       } 
      #card figure { 
       display: block; 
       position: absolute; 
       width: 100%; 
       height: 100%; 
       -webkit-backface-visibility: hidden; 
       } 
      #card .face1 { 
       background: red; 
       } 
      #card .face2 { 
       background: blue; 
       -webkit-transform: rotateY(180deg); 
       } 
      #card:hover { 
       -webkit-transform: rotateY(180deg); 
       } 
     </style> 
    </head> 

    <body> 
     <section class="container"> 
      <div id="card"> 
       <figure class="face1">1</figure> 
       <figure class="face2">2</figure> 
      </div> 
     </section> 
    </body> 
</html>

就像我說的它從教程字幾乎字，我唯一改變的是使用懸停代替按鈕。謝謝你的幫助。

來源

2012-07-27 jrl589

將margin: 0加到figure s。這個例子有一個應用它的外部樣式表，所以它不是很明顯，它是必要的。

來源

2012-07-27 22:07:16 freejosh

現在完美工作，謝謝。 – jrl589 2012-07-27 22:10:51

翻轉的初始化是不是與CSS做..它通過文件用javascript做「倒裝card.js」：

var init = function() { 
    var card = document.getElementById('card'); 

    document.getElementById('flip').addEventListener('click', function(){ 
    card.toggleClassName('flipped'); 
    }, false); 
}; 

window.addEventListener('DOMContentLoaded', init, false);

這需要有所改變的onHover選項事件處理程序。

來源

2012-07-27 22:13:42 Zak

有一個包含數字的容器，將數字放在容器添加規則中：margin: 0px;（默認情況下它不是0）。

來源

2012-07-27 22:14:43

嘿有兩個文件utils.js和flip.js ..包括他們與在你的CSS只是使用

-webkit-transform-style 
-moz-transform-style 
-o-transform-style 
transform-style

讓您的3D變換將在每一個瀏覽器渲染... :)

來源

2013-03-11 18:54:41 Tarun

CSS 3d透視關閉

回答

相關問題