Exemple détaillé de l'effet flop 3D des effets spéciaux CSS3

Cet article présente principalement l'effet flip 3D des effets spéciaux CSS3. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

J'ai récemment appris CSS3 et j'ai constaté qu'il s'améliore de plus en plus. Le CSS3 d'aujourd'hui n'est plus le CSS précédent, et les effets fonctionnels qu'il peut produire dépassent notre imagination. Il peut implémenter Flash, créer des effets qui peuvent être produits par js et peut également écrire des effets tels que des dégradés, des coins arrondis, des ombres, etc. C'est tellement éblouissant que je pense que beaucoup de gens l'ont déjà fait. . Étudions-le plus en profondeur, haha. Je l'ai aussi étudié un peu aujourd'hui, principalement sur certains de ses effets 3D, j'ai juste le temps de l'étudier aujourd'hui.

Le soi-disant effet de flop de carte 3D est en fait deux images, une devant et une derrière. Lorsque celle devant est tournée, elle tournera vers une. certain Lorsque l'angle est ajusté, les images suivantes pivoteront avec lui. L'une des images pivote jusqu'au point où elle ne peut pas être vue, mais l'autre image qui est sur le point de tourner nous est visible. Êtes-vous impatient, venez apprendre avec moi, haha~@@@

Tout d'abord, nous avons une telle mise en page en html :

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>

Ne sous-estimez pas le p à l'extérieur, il est indispensable pour ce contenu. Sans lui, les effets ultérieurs ne peuvent être obtenus. Une fois la mise en page terminée, il est temps de commencer à travailler dessus. La première chose à faire est définitivement l'extérieur. Donnez-lui une largeur et une hauteur. Vous pouvez le décider vous-même, je vais d'abord lui donner une largeur et une hauteur de 200*200. Maintenant que les choses extérieures sont terminées, les choses intérieures sont sur le point de commencer. Ici, nous donnons 200*200. A ce moment, quand je regarde dans le navigateur, je constate que p1 et p2 sont affichés de haut en bas, un vers le haut et un vers le bas. C'est correct. Il faut savoir que p est un élément de bloc et qu'il occupe une ligne entière, mais ce n'est pas vrai pour ce que nous avons dit auparavant. Il doit y avoir une contradiction entre le recto et le verso. Ne vous inquiétez pas, donnez-lui une position absolue : absolue pour que les centres des deux p coïncident. Afin de distinguer les deux p, il faut ici leur donner des couleurs de fond différentes. Le travail de préparation préliminaire est presque terminé, voyons maintenant comment obtenir l’effet !

Nous voulons obtenir un effet de flop de carte. Dès que nous l'entendons, nous savons qu'il doit y avoir une rotation. Cela nécessite l'utilisation du nouvel attribut transform:rotateY(?deg. ) en CSS3 ; Quelqu'un Vous vous demandez peut-être pourquoi c'est rotateY, mais vous ne le savez pas, n'est-ce pas ? Le flop tourne bien sûr le long de l'axe Y, haha ! Ainsi, lorsque la souris se déplace vers p, nous devons la laisser réaliser l'effet de rotation. Ensuite, l'utilisation du p externe arrive. Quel que soit le petit p utilisé, ils ne peuvent pas tourner en même temps à moins que notre souris ne clique sur On. ça p, il y a ce code,

.outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
            transform:rotateY(0deg);
        }

La rotation est là, mais la rotation sans aucun effet de transition a l'air moche, alors là, on leur donne un effet de transition, vous il faut utiliser le nouvel attribut en CSS3 transition:all 2s; ici signifie que tous ses effets seront en transition. En parlant de cela, nous n'avons en fait pas traité d'une chose, c'est-à-dire comment faire pivoter l'actuel vers l'arrière, et ce dernier apparaîtra immédiatement après. Il s'agit de la visibilité arrière : cachée, un attribut très important dans l'image. transformation. , cela signifie que lorsque l’image se déplace vers un endroit invisible sur l’écran d’affichage, elle disparaît. C'est-à-dire que nous pouvons le voir lorsqu'il est à l'origine orienté vers l'avant, mais lorsqu'il tourne de 180 degrés le long de l'axe Y, nous ne pouvons plus le voir. Si nous n'ajoutons pas cet attribut, nous pouvons voir l'image inversée. après la rotation, il ne sera plus visible. Nous allons donc ajouter cet attribut aux deux petits p. Et pour obtenir cet effet, nous devons faire en sorte que l'un des deux petits p ne soit pas tourné au début. Nous pouvons voir que l'autre, qui est celui derrière, est tourné de 180 degrés, de sorte que lorsque le premier p commence. pour tourner, nous ne verrons pas le deuxième p immédiatement, mais attendez qu'il tourne vers un endroit où il ne peut pas être vu, puis le deuxième p apparaîtra. Le code spécifique est le suivant :

<html><head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        .outer{
           width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .outer p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>

Ce qui précède est le contenu principal de cet article, j'espère qu'il pourra aider tout le monde.

【Tutoriels associés recommandés】

1. Tutoriel vidéo CSS
2 Manuel en ligne CSS
3. tutoriel bootstrap