search
HomeWeb Front-endCSS TutorialHow 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.

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

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

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

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)

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

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

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

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

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

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>

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

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Where should 'Subscribe to Podcast' link to?Where should 'Subscribe to Podcast' link to?Apr 16, 2025 pm 12:04 PM

For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:

Browser Engine DiversityBrowser Engine DiversityApr 16, 2025 pm 12:02 PM

We lost Opera when they went Chrome in 2013. Same deal with Edge when it also went Chrome earlier this year. Mike Taylor called these changes a "Decreasingly

UX Considerations for Web SharingUX Considerations for Web SharingApr 16, 2025 am 11:59 AM

From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these

Weekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical ResourcesWeekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical ResourcesApr 16, 2025 am 11:55 AM

In this week's roundup, Apple gets into web components, how Instagram is insta-loading scripts, and some food for thought for self-hosting critical resources.

Git Pathspecs and How to Use ThemGit Pathspecs and How to Use ThemApr 16, 2025 am 11:53 AM

When I was looking through the documentation of git commands, I noticed that many of them had an option for . I initially thought that this was just a

A Color Picker for Product ImagesA Color Picker for Product ImagesApr 16, 2025 am 11:49 AM

Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the with . Nor do we

A Dark Mode Toggle with React and ThemeProviderA Dark Mode Toggle with React and ThemeProviderApr 16, 2025 am 11:46 AM

I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including

Some Hands-On with the HTML Dialog ElementSome Hands-On with the HTML Dialog ElementApr 16, 2025 am 11:33 AM

This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor