How many types of 2d deformations are there in css3?

There are four types of 2D deformations in css3: 1. Displacement translate(), which moves the element a specified distance in the horizontal or vertical direction; 2. Scale(), which scales the element horizontally or vertically; 3 , Rotate rotate(), you can rotate the element; 4. Skew(), you can skew the element.

【Recommended tutorial: CSS video tutorial】

Transition is one of the subversive features in CSS3. It can realize the displacement, rotation, deformation, and scaling of elements, and even supports matrix methods. With transition and the animation knowledge you are about to learn, it can replace a large number of effects that could only be achieved with Flash before.

Transformation transform

1. Move translate(x, y)

translate(50px,50px);

Use the translate method to move the text or image vertically by 50 pixels in the horizontal and vertical directions.

You can change the position of the element, x and y can be negative values;

translate(x,y) moves horizontally and vertically at the same time (that is, the Move simultaneously)
translateX(x) only moves horizontally (X-axis movement)
translateY(Y) only moves vertically (Y-axis movement)

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

Make the positioned box horizontal Center

2, scale scale(x, y)

transform:scale(0.8,1);

Can horizontally sum elements Vertical scaling. This statement uses the scale method to shrink the element by 20% in the horizontal direction and does not scale in the vertical direction.

scale(X,Y) scales the element horizontally and vertically at the same time (that is, the X-axis and Y-axis scale simultaneously)
scaleX(x) The element only scales horizontally (X-axis Scale)
scaleY(y) element only scales in the vertical direction (Y-axis scaling)

The default value of scale() is 1, when the value is set to between 0.01 and 0.99 Any value will make an element smaller; and any value greater than or equal to 1.01 will make the element enlarge

3. Rotate rotate(deg)

You can rotate the element, positive value is clockwise, negative value is counterclockwise;

transform:rotate(45deg);

• When the element is rotated, the coordinate axis will also change accordingly.
• Adjusting the order can solve the problem, put the rotation at the end
• Note that the unit is deg degree

Case Rotating Playing Cards

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);

This example uses the skew method to tilt the element horizontally by 30 degrees, and the processing direction remains unchanged. .

can tilt the element at a certain angle, and can be a negative value. If the second parameter is not written, it defaults to 0.

transform-origin can adjust the origin of element transformation

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>

The positioning box is perfectly centered and written

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>

##Set the deformation center point

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="How many types of 2d deformations are there in css3?" >
	</p>

Rotating pictures

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="How many types of 2d deformations are there in css3?" >
	   <img  src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy" alt="How many types of 2d deformations are there in css3?" >
	   <img  src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy" alt="How many types of 2d deformations are there in css3?" >
	   <img  src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="How many types of 2d deformations are there in css3?" >
	   <img  src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="How many types of 2d deformations are there in css3?" >
	   <img  src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="How many types of 2d deformations are there in css3?" >
	</p>

For more programming-related knowledge, please visit:

Programming Learning Website! !

The above is the detailed content of How many types of 2d deformations are there in css3?. For more information, please follow other related articles on the PHP Chinese website!