Maison > Article > interface Web > Comment utiliser CSS3 pour obtenir un effet de flop 3D (code complet ci-joint)
Comment utiliser CSS3 pour obtenir un effet de flop 3D (code complet ci-joint)
- 坏嘻嘻original
- 2018-09-27 10:03:473641parcourir
J'ai découvert CSS3 récemment et j'ai vraiment l'impression que c'est une technologie très pratique et cool qui peut non seulement remplacer les motifs et les formes exprimés dans les images précédentes, mais aussi créer des effets spéciaux. Par exemple, les effets d'ombre, les effets de dégradé, etc., parmi lesquels l'effet de conversion 3D est particulièrement intéressant. Le contenu de cet article explique comment utiliser CSS3 pour obtenir un effet de retournement 3D. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Le principe de l'utilisation de CSS3 pour obtenir un effet de retournement 3D
Le soi-disant effet de retournement consiste à retourner l'image le long de l'axe y . Effet.
Tout d'abord, nous devons être clairs sur le fait qu'il existe deux divs de la même taille définis à l'origine, pas un seul ! Ensuite, nous devons chevaucher les deux divs et utiliser l'instruction position:absolute pour chevaucher les divs placés au-dessus et en dessous.
Ensuite, nous devons faire pivoter le premier div le long de l'axe y. Ici, nous utiliserons l'instruction transform:rotageY (-180deg) pour y parvenir. En même temps, nous devons faire la distinction entre les deux div. et faites pivoter l'un d'eux en même temps que 180 degrés, l'autre tourne de 0 degrés.
Enfin, lorsque le div pivoté de 180 degrés termine la rotation, nous le masquons et utilisons l'instruction backface-visibility: Hidden; pour réaliser la fonction de disparition de l'image lorsqu'elle est déplacée vers un endroit invisible sur l’affichage.
ps : Si quelqu'un n'est pas clair sur le contenu ci-dessus, vous pouvez consulter les articles pertinents sur ce site.
Comment utiliser CSS3 pour créer une animation de rotation circulaire (code complet ci-joint)
Code pour utiliser CSS3 pour réaliser une 3D effet flip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PHP中文网</title>
<script src="http://7xiyzi.com2.z0.glb.qiniucdn.com/20160409_weixinjquery-2.1.0.min.js?i=6" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="div1">
<div class="div2">
<img src="http://static.wesai.com/files/upload/9/bd9/feeae/9bd9dfeeaee3b9be37a3ad4e75fe7004.jpg" alt="Comment utiliser CSS3 pour obtenir un effet de flop 3D (code complet ci-joint)" >
</div>
</div>
</body>
</html>
<style>
.div1 {
width: 185px;
height: 251px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
}
.div1.div2 {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
backface-visibility：hidden;
}
img {
width: 185px;
height: 251px;
}
</style>
<script type="text/javascript">
$('.div1').click(() => {
$('.div1').addClass('div2')
})
</script>L'effet est comme indiqué sur l'image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!