Comment créer une carte flip effet sur les DIV à l'aide de javascript

Question

Je veux créer une carte à effet flip (le même que webkit transitions et les transformations 3d) sur les DIV à l'aide de simples javascript et CSS et PAS de bibliothèques ou de plugins.Comment puis-je y parvenir?Comme la plupart des propriétés CSS3 travail pour les navigateurs webkit.Et la plupart du javascript solutions utilise les bibliothèques comme jquery et ses plugins.Je suis à la recherche d'une solution qui permet de ne pas utiliser n'importe quelle bibliothèque, mais seulement en javascript/CSS et fonctionne toujours de la croix-navigateur.

Toute aide serait appréciée.

En ce qui concerne, manishekhawat

Answer 1

Transforms 3D dans CSS3 ne fonctionne actuellement que sur les navigateurs WebKit.Désolé - il n'y a aucun moyen de le faire dans d'autres navigateurs sans utiliser de polyfille JS tel que CSSSANDPaper ( http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ ).

Ce n'est pas recommandé, car cela conduira à une diminution grave des performances lors du chargement de la version JS.

Les transformations 3D et les animations de caractères essentielles sont toujours une toute nouvelle fonctionnalité de la spécification CSS3 et ne sont donc que adoptées dans les navigateurs les plus récents (Safari, Chrome).Si vous voulez une solution de navigateur croisée qui ne réquiste pas JavaScript, vous allez devoir vous asseoir sur vos pouces pendant quelques années.

Answer 2

Comment la mettre en œuvre:

Les animations CSS sont beaucoup de plaisir;la beauté d'entre eux est que, grâce à de nombreuses propriétés simples, vous pouvez créer quelque chose à partir d'un élégant fondu dans un WTF-Pixar--être-fier effet.Un CSS effet quelque part entre les deux est le CSS effet flip, dans laquelle il y a de contenu sur les deux l'avant et à l'arrière d'un conteneur.Ce tutoriel va vous montrer montrer à créer cet effet de manière aussi simple que possible.

Le HTML

La structure HTML pour accomplir les deux faces de l'effet est comme vous vous attendez à être:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

Il y a deux volets, "avant"et "de retour"comme vous vous en doutiez, mais aussi deux contenant des éléments très spécifiques rôles expliqué par leur CSS.Notez également la ontouchstart pièce qui permet à l'volets pour échanger sur les écrans tactiles.

Le CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

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

Voici un aperçu du processus:

• Les périphériques contenant des ensembles de l'ensemble de l'animation de la zone de point de vue

• Le récipient intérieur est l'élément qui fait des pirouettes, filature 180 degrés lorsque le conteneur parent est survolé.C'est aussi là vous contrôlez la vitesse de transition.La modification de la rotation à 180deg tours les éléments dans le sens inverse.

• L'avant et l'arrière les éléments sont positionnés absolument afin qu'ils puissent "superposition" les uns les autres dans la même position;leur backface-visibilité est caché de sorte que le dos de l'retourné éléments ne s'affichent pas lors de de l'animation.

• La face avant de l'élément a un z-index supérieur de l'arrière de l'élément de sorte que le l'élément avant de coder d'abord, mais il s'affiche toujours sur le dessus

• L'arrière de l'élément est faire pivoter de 180 degrés, de façon à agir à l'arrière.

C'est vraiment tout ce qu'il ya à faire!Mettre cette simple structure en place et puis le style de chaque côté que vous le souhaitez!

CSS Flip Bascule

Si vous préférez l'élément de retourner sur commande via JavaScript, une simple classe CSS à bascule fera l'affaire:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

L'ajout de l'envers de la classe à l'élément conteneur va retourner la carte à l'aide de JavaScript -- aucun utilisateur placez nécessaire.Un commentaire comme JavaScript

document.querySelector("#myCard").classList.toggle("flip") va faire le flip!

CSS Vertical Flip

L'exécution d'une symétrie verticale est aussi facile que de retournement de l'axe et de l'ajout de la transformation d'origine valeur de l'axe.L'origine de la rotation doit être mis à jour et la carte de rotation de l'autre sens:

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

Vous pouvez voir que le X de l'accès s'en servent pas l'Y.

Tout le crédit va à son Développeur, David Walsh, je viens de reproduire le contenu.