Comment implémenter la rotation avec un point comme point fixe en CSS

Comment faire pivoter du CSS avec un point comme point fixe : 1. Créez un nouveau fichier HTML ; 2. Importez des images via img ; 3. Ajoutez l'attribut css à la balise img comme "@keyframes rotate{0%{transform : rotate(0deg); }100%{transform: rotate(360deg);}}" peut réaliser une rotation avec un point comme point fixe.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment réaliser une rotation à virgule fixe avec CSS ?

css pour implémenter la rotation de l'image et définir le point de rotation

Faites d'abord quelques connaissances techniques :

Exemple

Rotation de l'élément div :

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

Définition et utilisation

L'attribut de transformation s'applique en 2D ou en 2D à la conversion 3D de l'élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

Syntaxe

transform: none|transform-functions;

Valeur	Description
none	Définition Aucune conversion n'est effectuée.
matrix(n,n,n,n,n,n)	définit une transformation 2D, en utilisant une matrice de six valeurs.
matrix3d(n,n,n,n,n,n,n,n,n,n, n, n,n,n,n,n)	Définissez la transformation 3D, à l'aide d'une matrice 4x4 de 16 valeurs.
translate(x,y)	définit la transformation 2D.
translate3d(x,y,z)	définir la transformation 3D.
translateX(x)	définit la transformation, en utilisant simplement la valeur de l'axe X.
translateY(y)	définit la transformation, en utilisant simplement la valeur de l'axe Y.
translateZ(z)	définit une transformation 3D, en utilisant simplement la valeur de l'axe Z.
scale(x,y)	définit la transformation de mise à l'échelle 2D.
scale3d(x,y,z)	définit la transformation de mise à l'échelle 3D.
scaleX(x)	Définit la transformation de mise à l'échelle en définissant la valeur de l'axe X.
scaleY(y)	Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe Y.
scaleZ(z)	Définissez la transformation de mise à l'échelle 3D en définissant la valeur de l'axe Z.
rotate(angle)	définit la rotation 2D, en spécifiant l'angle dans les paramètres.
rotate3d(x,y,z,angle)	définit la rotation 3D.
rotateX(angle)	définit une rotation 3D le long de l'axe X.
rotateY(angle)	définit une rotation 3D le long de l'axe Y.
rotateZ(angle)	définit une rotation 3D le long de l'axe Z.
skew(x-angle,y-angle)	définit une transformation d'inclinaison 2D le long des axes X et Y.
skewX(angle)	définit une transformation d'inclinaison 2D le long de l'axe X.
skewY(angle)	définit une transformation d'inclinaison 2D le long de l'axe Y.
perspective(n)	Définit une vue en perspective pour un élément de transformation 3D.

Ensuite, le problème que tout le monde rencontre le plus en le faisant est le point de départ, qui est le problème du point de rotation. Je veux qu'il se retourne comme ça, pourquoi n'obéit-il pas ?

Il s'agit de transform origin

Exemple

Définissez la position du point de base de l'élément pivoté :

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

Définition et utilisation

L'attribut transform-origin vous permet de modifier la position de l'élément transformé.

2D Transform Element est capable de modifier les axes x et y de l'élément. Les éléments de transformation 3D peuvent également modifier leur axe Z.

Pour mieux comprendre la propriété transform-origin.

Utilisateurs Safari/Chrome : Pour mieux comprendre l'utilisation de la propriété transform-origin pour les transformations 3D.

Remarque : cet attribut doit être utilisé avec l'attribut transform.

Syntaxe

transform-origin: x-axis y-axis z-axis;

value	Description
x-axis	Définit où sur l'axe X la vue est placée. Valeurs possibles : left center right length %
y-axis	définit l'endroit où la vue est placée sur l'axe Y. Valeurs possibles : top center bottom length %
z-axis	définit l'endroit où la vue est placée sur l'axe Z. Valeurs possibles : length

最后，给大家呢演示一个实例demo：

原始图片为一个黑色正方形，我们希望它根据左上角的顶点进行旋转：

图片：

源码：

nbsp;html>

	
		<meta>
		<title></title>
		<style>
			img{
				margin-top: 200px;
				margin-left: 500px;
				width: 100px;
				height: 100px;
				display: block;
   				 animation: rotate 6s linear infinite;
   				 transform-origin:0 0;
			}
			@keyframes rotate{
				0%{
					transform: rotate(0deg);
					
				}
				100%{
					transform: rotate(360deg);
				}
			}
		</style>
	
	
		
		<img  alt="Comment implémenter la rotation avec un point comme point fixe en CSS" >
		
	

 效果展示：

你自行复制代码吧。。。！！！ 

推荐学习：《css视频教程》

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!