简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Comment réaliser une rotation d'image CSS3 ? Comment obtenir un effet d'animation de rotation d'image en CSS3

不言
Libérer： 2018-09-12 14:24:40
original
10874 Les gens l'ont consulté

Sur les pages Web, nous pouvons souvent voir une image tourner. Comment une telle rotation d'image est-elle réalisée ? Cet article vous présentera comment obtenir un effet d'animation de rotation d'image avec CSS3.

La rotation des images en CSS3 peut être réalisée en utilisant une combinaison de -webkit-animation et @-webkit-keyframes.

-webkit-animation est un attribut composite, défini comme suit :

-webkit-animation : nom durée timing-function delay iteration_count direction ;

name : est une méthode qui doit être spécifiée dans @-webkit-keyframes pour effectuer une animation.

durée : La durée d'exécution de l'animation en un cycle.

fonction de synchronisation : l'effet de l'exécution de l'animation peut être linéaire, ou il peut être "une entrée rapide et une sortie lente", etc.

delay : La durée de l'exécution du retard de l'animation.

iteration_count : Le nombre de fois d'exécution de la boucle d'animation Si elle est infinie, elle sera exécutée à l'infini.

direction : direction d'exécution de l'animation.

Les deux attributs from et to dans @-webkit-keyframes spécifient la valeur initiale et la valeur finale de l'exécution de l'animation.

-webkit-animation-play-state:paused; Met en pause l'exécution de l'animation.

Après avoir compris les valeurs d'attribut utilisées en CSS3 pour implémenter la rotation d'image, regardons directement le code de CSS3 pour implémenter l'animation de rotation d'image : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>transform</title>
  <style>
    #loader {
        display: block;
        position: relative;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
  </style>
 </head>
 <body>
  <div id="test" >
　　<img src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg" style="width:250px;height:250px" id="loader" />  
  </div>
 </body>
</html>
Copier après la connexion

C'est tout pour cet article C'est terminé. Pour plus de propriétés d'animation en CSS3, veuillez vous référer au Manuel d'apprentissage CSS3.

Recommandations associées :

CSS3 pour réaliser le grossissement et la rotation des images_html/css_WEB-ITnose

Comment faire en sorte que les images ne se réalisent pas en css3 L'effet de l'arrêt de la rotation ? 【Explication détaillée】

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!

Étiquettes associées：
css3 图片旋转
source：php.cn
Article précédent：Comment définir le dégradé de couleur des bordures en CSS3 ? Deux méthodes d'implémentation du dégradé de couleurs de bordure CSS3 Article suivant：Quels sont les sélecteurs de pseudo-classe en CSS3 et comment utiliser le sélecteur de pseudo-classe nth-child()
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！