Comment faire pivoter une image en CSS3-Questions et réponses frontales-php.cn

Comment faire pivoter une image en CSS3

青灯夜游

Libérer： 2022-08-31 18:35:34

original

3504 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut d'animation et la règle "@keyframes" pour ajouter une animation de rotation à l'image afin de faire pivoter l'image. Étapes de mise en œuvre : 1. Utilisez l'instruction "@keyframes animation name {50% {transform: rotate(rotation angle);}" pour créer une animation de rotation ; 2. Utilisez l'instruction "picture element {animation: animation name time infinite;} " pour animer la rotation, appliquez-le simplement à l'élément d'image spécifié.

Comment faire pivoter une image en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS3, vous pouvez utiliser l'attribut d'animation et la règle "@keyframes" pour ajouter une animation de rotation à l'image afin de la faire pivoter

@keyframes est une règle de CSS3 qui peut être utilisée pour définir un cycle de CSS animation Behaviour vous permet de créer des animations simples. La propriété
animation (animation) est utilisée pour appliquer une animation à un élément spécifié ; en utilisant différentes propriétés d'animation CSS, vous pouvez contrôler de nombreux aspects différents de l'animation, y compris le nombre d'itérations d'animation, s'il faut alterner entre le début et la fin. valeurs et si l'animation doit s'exécuter ou être mise en pause. Les animations peuvent également retarder leur heure de début.

Syntaxe :

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Copier après la connexion

Pour définir une animation de rotation, vous devez utiliser l'attribut transform ; utilisez transform: rotate (angle de rotation) dans la règle "@keyframes" pour contrôler l'action de rotation.

Code d'implémentation :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}
			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Comment faire pivoter une image en CSS3" >
	</body>
</html>

Copier après la connexion

Comment faire pivoter une image en CSS3

Description : attribut d'animation

valeur	Description
animation	Un attribut d'abréviation.
animation-name	Spécifie le nom de l'image clé à lier au sélecteur
animation-duration	L'animation spécifie combien de secondes ou de millisecondes il faut pour terminer
animation-timing-function	Définissez la façon dont l'animation terminera un cycle
animation-delay	Définissez l'intervalle de retard avant le début de l'animation.
animation-iteration-count	définit le nombre de fois que l'animation est jouée.
animation-direction	Spécifie si l'animation doit être jouée à l'envers à tour de rôle.
animation-fill-mode	spécifie le style à appliquer à l'élément lorsque l'animation n'est pas en cours de lecture (lorsque l'animation se termine ou lorsque l'animation a un délai avant de commencer à jouer).
animation-play-state	Spécifie si l'animation est en cours d'exécution ou en pause.