Comment utiliser CSS3 pour obtenir des effets de retournement d'image

CSS3 fait partie intégrante de la conception Web. Parmi eux, grâce à la conversion 3D de CSS3, l'effet de retournement des images peut être obtenu, ajoutant du dynamisme et de la mode à la page Web. Voyons comment implémenter les effets de retournement d'image CSS3.

Étapes de mise en œuvre

1. Tout d'abord, vous devez insérer des éléments d'image via du code HTML, comme indiqué ci-dessous :

<div class="container">
    <img src="image.jpg" alt="image" />
</div>

où conteneur est le conteneur utilisé pour contenir les images.

2. Ensuite, définissez les styles pour le conteneur et l'img via le code CSS, comme indiqué ci-dessous :

.container {
    perspective: 800px;
    /* 把container容器设置成3D透视 */
}
img {
    width: 100%;
    height: 100%;
    /* 设置图片的宽高 */
    position: absolute;
    backface-visibility: hidden;
    /* 隐藏图片的背面 */
    transition: transform .6s ease;
    /* 设置动画效果 */
}

Parmi eux, l'attribut perspective consiste à définir la distance de perspective du conteneur, et l'attribut backface-visibility est utilisé pour contrôler si pour afficher l'arrière de l'élément. L'attribut de transition est utilisé pour obtenir l'effet d'animation du retournement de l'image.

3. Ensuite, définissez l'effet de retournement pour l'image. Définissez les styles pour le recto et le verso respectivement, comme indiqué ci-dessous :

img {
    transform-style: preserve-3d;
    /* 设置为3D */
}
img:hover {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:hover:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

Ici, l'attribut transform est utilisé pour définir l'angle de retournement, et l'attribut content est utilisé pour ajouter un "pseudo-élément" virtuel derrière l'élément pour améliorer la flexibilité. du style.

4. Enfin, réglez le conteneur en perspective et définissez l'effet de retournement de l'image, comme indiqué ci-dessous :

.container:hover img {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
.container:hover img:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

De cette façon, lorsque la souris survole le conteneur, l'image sera retournée en 3D.

Résumé

Les effets de retournement d'image CSS3 peuvent ajouter de la dynamique et de la mode aux pages Web, les rendant plus intéressantes et plus vivantes. Grâce aux étapes ci-dessus, nous pouvons facilement implémenter des effets de retournement d’image CSS3.

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!