Combien de types de déformations 2D existe-t-il en CSS3 ?

Il existe quatre types de déformations 2D dans CSS3 : 1. Displacement translation(), qui déplace l'élément d'une distance spécifiée dans la direction horizontale ou verticale ; 2. Scale(), qui met l'élément à l'échelle horizontalement ou verticalement ; ; 3 , Rotate rotate(), vous pouvez faire pivoter l'élément ; 4. Skew(), vous pouvez incliner l'élément.

[Tutoriel recommandé : Tutoriel vidéo CSS]

La transformation est l'une des fonctionnalités perturbatrices de CSS3. réalise le déplacement, la rotation, la déformation et la mise à l'échelle des éléments, et prend même en charge les méthodes matricielles. Avec les connaissances en transition et en animation que vous apprendrez bientôt, il peut remplacer un grand nombre d'effets qui ne pouvaient être obtenus auparavant qu'avec Flash.

Transformer transformation

1. Déplacer traduire(x, y)

translate(50px,50px);

Utilisez la méthode de traduction pour déplacer le texte ou l'image verticalement de 50 pixels dans les directions horizontale et verticale.

peut changer la position de l'élément, x et y peuvent être des valeurs négatives

translate(x,y) se déplace simultanément dans les directions horizontale et verticale (c'est-à-dire le L'axe X et l'axe Y se déplacent simultanément)
TranslateX(x) se déplace uniquement horizontalement (mouvement de l'axe X)
TranslateY(Y) ne se déplace que verticalement (mouvement de l'axe Y)

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

Rendre la boîte positionnée horizontalement Centrée

2. Échelle échelle (x, y)

transform:scale(0.8,1);

peut additionner horizontalement des éléments. Mise à l'échelle verticale. Cette instruction utilise la méthode d'échelle pour réduire l'élément de 20 % dans le sens horizontal et ne met pas à l'échelle dans le sens vertical.

scale(X,Y) met à l'échelle l'élément horizontalement et verticalement en même temps (c'est-à-dire l'échelle des axes X et Y simultanément)
scaleX(x) L'élément uniquement met à l'échelle horizontalement (échelle de l'axe X)
l'élément scaleY(y) évolue uniquement dans la direction verticale (mise à l'échelle de l'axe Y)

La valeur par défaut de scale() est 1, lorsque la valeur est défini entre 0,01 et 0,99. Toute valeur fera rétrécir un élément ; et toute valeur supérieure ou égale à 1,01 fera agrandir l'élément

Rotation rotation(deg)

Vous pouvez faire pivoter l'élément, la valeur positive est dans le sens des aiguilles d'une montre, la valeur négative est dans le sens inverse des aiguilles d'une montre

transform:rotate(45deg);

Lorsque l'élément est pivoté, la coordonnée l'axe change également.
• Ajuster l'ordre peut résoudre le problème, en mettant la rotation à la fin
• Notez que l'unité est le degré de degré

Étui à cartes à jouer rotatif

body {
  background-color: skyblue;
}
.container {
  width: 100px;
  height: 150px;
  border: 1px solid gray;
  margin: 300px auto;
  position: relative;
}
.container > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top right;
  /* 添加过渡 */
  transition: all 1s;
}
.container:hover img:nth-child(1) {
  transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
  transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
  transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
  transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
  transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
  transform: rotate(360deg);
}

4. Slant skew(deg, deg)

transform:skew(30deg,0deg);

Cet exemple utilise la méthode d'inclinaison pour incliner le élément horizontalement de 30 degrés, et la direction de traitement reste inchangée.

peut incliner l'élément selon un certain angle et peut avoir une valeur négative. Si le deuxième paramètre n'est pas écrit, sa valeur par défaut est 0.

transform-origin peut ajuster l'origine de la transformation de l'élément

p{transform-origin: left top;transform: rotate(45deg); }  
/* 改变元素原点到左上角，然后进行顺时旋转45度 */

Transform-Move

nbsp;html>
	<meta>
	<title>2D变形-移动</title>
	<style>
	p {
		width: 100px;
		height: 100px;
		background-color: pink;
		transition: all 0.5s;  /* 过渡效果 */
	}
	p:active {
		/*  transform: translateX(100px);X轴 */
		/* a:activ 
		鼠标没点击没有松开鼠标的时候触发的状态 相当于点击 */

		/* 只有一个参数就是 X轴 */
		/* transform: translate(50px); */

		transform: translateY(100px); /* Y轴 */
		/* transform: translate(100px,100px); */
	}
	</style>
	<p></p>

La boîte positionnée est parfaitement centrée et écrite

nbsp;html>
	<meta>
	<title>让定位的盒子居中对齐</title>
	<style>
	p {
		width: 200px;
		height: 200px;
		background-color: skyblue;
		/* transform: translate(100px);  */ /* 水平移动100px; */

		/*transform: translate(50%);    p自己的width的百分比 */

		/* 之前盒子居中定位 */
		position: absolute;
		left: 50%;
		top: 50%;
		/* margin-left: -100px; 需要计算不合适 */
		transform: translate(-50%,-50%);
	}
	</style>
	<p></p>

Définir le point central de déformation

nbsp;html>
	<meta>
	<title>设置变形中心点</title>
	<style>
	img {
		margin: 200px;
		transition: all 0.6s;
		/*transform-origin: center center;  默认 */
		transform-origin: bottom right;
	}
	img:hover {
		transform: rotate(360deg);  /* 旋转180度 */
	}
	</style>
	<p>
	   <img  src="/static/imghw/default1.png" data-src="images/pk1.png" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	</p>

Rotation des images

nbsp;html>
	<meta>
	<title>旋转的楚乔传</title>
	<style>
	p {
		width: 200px;
		height: 100px;
		border: 1px solid skyblue;
		margin: 200px auto;
		position: relative;
	}
	p img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.6s;
		transform-origin: top right;
	}
	p:hover img:nth-child(1) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(60deg);
	}
	p:hover img:nth-child(2) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(120deg);
	}
	p:hover img:nth-child(3) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(180deg);
	}
	p:hover img:nth-child(4) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(240deg);
	}
	p:hover img:nth-child(5) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(300deg);
	}
	p:hover img:nth-child(6) {  /* 鼠标经过p  第一张图片旋转 */
		transform: rotate(360deg);
	}

	</style>
	<p>
	   <img  src="/static/imghw/default1.png" data-src="images/6.jpg" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	   <img  src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	   <img  src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	   <img  src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	   <img  src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	   <img  src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="Combien de types de déformations 2D existe-t-il en CSS3 ?" >
	</p>

Pour plus de connaissances liées à la programmation, veuillez visiter :

Site Web d'apprentissage de la programmation ! !

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!