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/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!

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

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

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

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.

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

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
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor