CSS perspective 3d off

J'essaie d'obtenir un coup d'oeil sur les fonctions de transformation 3D en CSS. Mon code à ce stade est à peu près copié directement à partir d'un tutoriel parce que peu importe comment dur j'essaie je ne peux pas sembler le faire fonctionner correctement. le lien sur la façon dont il est censé regarder est: http://desandro.github.com/3dtransforms/examples/card-01.html CSS perspective 3d off

et mon code est:

<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>

comme je l'ai dit son mot à peu près pour mot du tutoriel, seule chose que je changé utilisait vol stationnaire au lieu d'un bouton. Merci pour toute aide.

Source

2012-07-27 jrl589

ajouter margin: 0 au figure s. L'exemple a une feuille de style externe qui l'applique, donc il n'est pas immédiatement évident que c'est nécessaire.

Source

2012-07-27 22:07:16 freejosh

fonctionne parfaitement maintenant, merci. – jrl589

L'initialisation de la bascule n'est pas être fait avec CSS .. Il est fait avec JavaScript via le fichier « flip-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);

Cela doit être des modifications à un gestionnaire d'événements onHover .

Source

2012-07-27 22:13:42 Zak

Il existe un conteneur qui contient les figures, pour placer des chiffres directement dans la règle d'ajout de conteneur: margin: 0px; (par défaut, ce n'est pas 0).

Source

2012-07-27 22:14:43

Hey, il y a deux fichiers utils.js et flip.js .. comprennent tous les deux et dans votre css il suffit d'utiliser

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

afin que votre transformation 3D rendra dans tous les navigateurs ... :)

Source

2013-03-11 18:54:41 Tarun

CSS perspective 3d off

Répondre

Questions connexes