2D Displacement Properties
The use of displacement attributes (moving the position of elements)
1. Attribute: transform deformation/transformation
2. Attribute value:
- translate(x, y) moves along the X and Y axes, and when there is only one attribute value, it will only move along Move on the X axis - translateX (
) move along X - translateY
() move along Y Element out of document flow - offset can be set to a negative value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
}
div{
width: 100px;
height: 100px;
background: red;
transition: 0.8s;
}
section:hover div{
transform: translateY(100px)
}
</style>
</head>
<body>
<section>
<div></div>
文本
</section>
</body>
</html>
When the mouse touches the div box:
Scaling attributes in CSS3
1. Attribute: transform
2. Attribute value:
- scale(x,y) Change the width and height of the element, when the parameters of x and y are the same, it can be abbreviated as one
- scaleX() width
- scaleY() height
3. About the use of parameters in the attribute value
- when it is less than 0, zoom out first and then zoom in (rotate 180deg)
- when it is equal to 0, hide
- when it is less than 1, zoom out
- when it is equal to 1, it does not change the display
- when it is greater than 1, zoom in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
div:nth-child(1){
width: 80%;
height: 5px;
background: red;
position: absolute;
top: 20%;
left: 10%;
transform-origin: left top
}
div:nth-child(2){
width: 80%;
height: 5px;
background: green;
position: absolute;
bottom: 20%;
transform-origin: right bottom;
left: 10%;
}
div:nth-child(3){
width: 5px;
height: 80%;
background:yellow;
position: absolute;
left: 20%;
top: 10%;
transform-origin: left bottom
}
div:nth-child(4){
width: 5px;
height: 80%;
background:yellowgreen;
position: absolute;
right: 20%;
top: 10%;
transform-origin: right top
}
div{
transform: scale(0);
transition: 0.8s
}
section:hover div{
transform: scale(1)
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
1. The use of rotation attributes
1. Attribute: transform
2. Attribute value: rotate (parameter)
- rotate (one parameter) defaults to the Z axis
- rotateX() horizontal bar movement
- rotateY() pole dancing
3. Pay attention to the viewing angle of rotation
- When observing, always stand in the direction of the positive value of the current axis (the direction of the positive value looks towards the direction of the negative value)
- set the positive value to always be clockwise, and the negative value to be counterclockwise
. There are two expressions
- set perspective:1200px on the parent element
- set transform:perspective(1200px) on the child element
Two: The use of skew attributes
1. Attribute: transform
2. Attribute value:
- skew(x,y)
- skewX()
- skewY()
3D attributes
1: To form a 3D space, the browser only has one more Z-axis to operate, and the browser will not have any changes 1. Attribute
: transform-style
2. Attribute value
- flat default value 2D space
- preserve-3d form 3D space more Z axis
2. Displacement property
1.transform:translateZ(200px)
2.transform:translate3d(10px,20px,30px)
Three: scaling attribute
1.transform:scaleZ(2) defaults to the Z axis, writing alone has no effect
2.transform:scale3d(2,3,4) needs to be used with x and y
Four: Rotation attribute
1.transform:rotateZ(30deg)
2.transform:rotate3d(0,0,1,30deg) The first three parameters represent the xyz axis switch (1\0)
Note: the impact of displacement and rotation on position
1 .When an element has multiple identical deformation attribute values to use, you can write the attribute values together, separated by spaces. 2.
When the displacement and other attributes appear at the same time, write the displacement first, and then write other attributes value
