Transform in CSS3
transformIt is one of the subversive features in CSS3, which can realize the displacement, rotation, deformation, scaling and other effects of elements.
Browser support
- Internet Explorer 10, Firefox, and Opera support transform attributes.
- Internet Explorer 9 supports the alternative -ms-transform attribute (only for 2D transformation).
- Safari and Chrome support the alternative -webkit-transform property (3D and 2D transformation).
- Opera only supports 2D conversion.
Transform is divided into 2D conversion and 3D conversion, let's take a look at 2D conversion first!
2D conversion
2D conversion is a technique to change the position and shape of the label on a two-dimensional plane
Use of 2D conversion
translate (displacement) attribute
2D translate (displacement) is mainly horizontal and vertical displacement
grammar
transform: translate(x, y);
transform: translateX(n);
transfrom: translateY(n);
transfrom: translateX(n) translateY(n);
Translate (displacement) attribute usage instructions
- The biggest advantage of translate is that it does not affect the position of other elements
- The 100% unit in translate is calculated relative to its own width and height
- Inline tags have no effect
rotate attribute
2D rotate refers to rotating the element clockwise or counterclockwise in a two-dimensional plane.
grammar
transform: rotate(60deg);
Instructions for use of rotate attribute
- rotate (angle), the positive number in the brackets is clockwise, and the negative number is counterclockwise.
The rotation center point of the rotate attribute
grammar
transform-origin: x y;
Use instructions for the rotation center point of the rotate attribute
- The parameter
xand theymiddle are separated by a space xyThe center point of the default rotation is the center of the element (50% 50%), which is equivalent to center center- You can also set pixels or position nouns for xy (top, bottom, left, right, center)
scale attribute
2D scale (zoom) can be used to control the enlargement and reduction of elements
grammar
transform: scale(x, y);
Instructions for using the scale attribute
- Use a comma to separate x and y in the brackets
transform: scale(1, 1): The width and height are doubled, which is equivalent to no zoomtransform: scale(2, 2): Both the width and height are doubledtransform: scale(2): If only one parameter is written, the second parameter is the same as the first parametertransform:scale(0.5, 0.5): Zoom outscaleThe biggest advantage is that you can set the conversion center point zoom, the default zoom is at the center point, and it does not affect other boxes
2D conversion comprehensive writing
Use multiple conversion syntaxes at the same time
transform: translate() rotate() scale();
note:
- The writing order of comprehensive writing attributes will affect the conversion effect
- When we have displacement and other attributes at the same time, we need to put the displacement to the front
Comprehensive case of 2D conversion (including displacement, rotation, scaling, bevel)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变换</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
border: 2px solid #777;
background-color: skyblue;
margin: 50px auto;
transform: translate(0px, 0px);
transition: all 1s ease;
}
.box1:hover {
transform: translate(50px, 50px);
}
.box1:active {
transform: translate(-50px, -50px);
}
.box2 {
width: 200px;
height: 200px;
border: 2px solid #777;
background-color: red;
margin: 50px auto;
transform: scale(1, 1);
transition: all 2s ease;
}
.box2:hover {
transform: scale(0.5, 0.5);
}
.box3 {
width: 200px;
height: 200px;
border: 2px solid #777;
background-color: blue;
margin: 50px auto;
transform: rotate(0deg);
transition: all 1s ease;
}
.box3:hover {
transform: rotate(360deg);
}
.box4 {
width: 200px;
height: 200px;
border: 2px solid #777;
background-color: greenyellow;
margin: 50px auto 0;
transform: skew(0, 0);
transition: all 500ms ease;
}
.box4:hover {
transform: skew(0deg, -45deg);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
After 2D learning, we will insert an important knowledge point!
CSS3 animation
What is animation?
Animation is one of the key knowledge in CSS3. You can precisely control one or a group of animations by setting multiple nodes to achieve complex animation effects.
Basic use of animation
1. Define animation
2. Call our defined animation
Maybe some people think this is nonsense?
But the animation is actually that simple
Animation syntax
Define animation
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
Call our defined animation
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
Look, it's that simple!
Next, let’s take a look at the animation sequence
- 0% is the beginning of the animation, 100% is the completion of the animation, this rule is the animation sequence
- If you specify a CSS style in @keyframs, you will gradually change the animation effect from the current style to the new style.
- Animation is the effect of gradually changing elements from one style to another. You can change any number of styles any number of times
- A percentage change of the predetermined time, or with
fromandtoequivalent to 0% and 100%
Everyone can make a little animation by yourself and try it out!
For example, implement a 200*200 pink grid to move around on the browser screen.
Animation common attributes
Animation shorthand
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
Animation instructions
-
Animation shorthand attribute does not include
animation-paly-state -
Pause animation
animation-paly-state: paused; often used in conjunction with mouse passing and other -
If you want the animation to come back, rather than directly adjust it back:
animation-direction: alternate -
After the box animation ends, stop at the end position:
animation-fill-mode: forwards
Animation speed curve
animation-timing-function: Specifies the speed curve of the animation, the default isease
Animation case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维码扫描</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-image: url(./微信图片_20201209174637.jpg);
position: relative;
}
.xian {
width: 180px;
height: 2px;
margin-left: 10px;
background-color: skyblue;
position: absolute;
animation-name: myfirst;
animation-duration: 3s;
animation-timing-function: ease;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes myfirst {
from {
top: 0;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="xian"></div>
</div>
</body>
</html>
Alright! After the knowledge point is interrupted, let's continue our conversion.
3D conversion
I believe that everyone is not unfamiliar with 3D. The effect that 3D presents to us is that it is close to small and far away, and the object is not visible where the object is blocked.
When you mention 3D, you have to talk about the three-dimensional coordinate system
- x-axis: horizontal to the right (the right side of the x-axis is positive and the left is negative)
- y-axis: vertically downwards (the bottom of the y-axis is positive, and the top is negative)
- z-axis: vertical screen (positive values to the outside, negative values to the inside)
Use of 3D conversion
translate3d (displacement)
3DThat is moved 2Dbased on the moving direction of a movable pay more, that is, the z-axis direction,
transform: translateX(100px): Just move on the x-axistransform: translateY(100px): Just move on the y axistransform: translateZ(100px): Just move on the z axistransform: translate3d(x, y, z): Where x, y, z respectively refer to the distance of the axis to be moved
note:
- The corresponding value of x, y, z cannot be omitted, if the value does not need to be filled in, use 0 to fill in
grammar
transform: translate3d(x, y, z);
perspective
- If you want to generate pages
3Deffect fluoroscopy is required (understood as3Dthe object projected2Don a plane) - Actually imitating the human visual position, it can be regarded as arranging one eye to see
- Perspective is also called visual distance, the so-called visual distance is the distance from the human eye to the screen
- The closer to the visual point, the larger the image on the computer plane, the farther the image is smaller
- The unit of perspective is pixels
perspective (perspective) instructions
Perspective needs to be written on the parent box of the inspected element
Pay attention to the picture below
- d: It is the viewing distance, which is the distance between the human eye and the screen
- z: It is the z-axis, the larger the z-axis (positive value), the larger the object we see
grammar
perspective: 1000px;
translateZAnd perspecitvethe difference?
perspecitveIt is set for the parent andtranslateZdifferent sizes for the child elements
rotate(3D rotation)
3D rotation means that the element can be rotated along the x-axis, y-axis, z-axis or a custom axis in a three-dimensional plane
grammar
transform: rotateX(45deg): Rotate 45 degrees along the positive x-axistransform: rotateY(45deg): Rotate 45 degrees along the positive y-axistransform: rotateZ(45deg): Rotate 45 degrees along the positive z-axistransform: rotate3d(x, y, z, 45deg): Rotate 45 deg along the custom axis as the angle
rotate3d
transform: rotate3d(x, y, z, deg)– Rotate deg to an angle along a custom axis- x, y, z represent the vector of the rotation axis, which is to identify whether you want to rotate along the axis, and the last one identifies the angle of rotation
E.g:
transform: rotate3d(1, 1, 0, 180deg): Rotate 45deg along the diagonaltransform: rotate3d(1, 0, 0, 180deg): Rotate 45deg along the x-axis
transform-style (3D rendering)
-
Control whether the child element opens the three-dimensional environment
-
transform-style: flat;It represents a sub-element is not turned on3Dthree-dimensional space, the default value. -
transform-style: preserve-3d;Indicates that the child element opens the three-dimensional space -
The transform-style is written to the parent box, but it affects the child box.
3D conversion comprehensive case (Trojan horse map)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3旋转木马</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px auto;
perspective: 1000px;
}
.stage {
border: 1px solid black;
margin: 200px auto;
position: relative;
width: 200px;
height: 100px;
transform-style: preserve-3d;
animation: rot linear 10s infinite;
}
.stage div {
position: absolute;
width: 200px;
height: 100px;
}
.stage div:nth-child(1) {
background-image: url(./1.jpg);
background-size: 100% 100%;
transform: rotateY(0deg) translateZ(350px);
}
.stage div:nth-child(2) {
background-image: url(./2.jpg);
background-size: 100% 100%;
transform: rotateY(60deg) translateZ(350px);
}
.stage div:nth-child(3) {
background-image: url(./3.jpg);
background-size: 100% 100%;
transform: rotateY(120deg) translateZ(350px);
}
.stage div:nth-child(4) {
background-image: url(./1.jpg);
background-size: 100% 100%;
transform: rotateY(180deg) translateZ(350px);
}
.stage div:nth-child(5) {
background-image: url(./2.jpg);
background-size: 100% 100%;
transform: rotateY(240deg) translateZ(350px);
}
.stage div:nth-child(6) {
background-image: url(./3.jpg);
background-size: 100% 100%;
transform: rotateY(300deg) translateZ(350px);
}
@keyframes rot {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(0deg) rotateY(-360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="stage">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>