1, 2D conversion
1. transform:translate(): the unit of translation can be%, but% is its own, not the parent element
The default is to move along the X axis
transform:translateX() moves along the x-axis and translateY() moves along the y-axis,
translate(20px,20px) defines 2D translation (translateX(20px) translateY(20px))
2. transform:scale(), the default value is 1, which is smaller than 1 hour and larger than 1 hour
scale() sets both x and y directions
scaleY() sets the y direction
scaleX() sets the x direction
scale(2,3) defines 2D scaling
The increase of this element depends on the values in the x and y directions. Negative numbers can be taken, but when taking negative numbers, first rotate (clockwise (180deg)) and then scale
3. transform:rotate() rotates along the z-axis by default, in deg
rotateX() rotates from the current element position according to the parameters given by the X-axis
rotateY(), rotates from the current element position according to the parameters given by the Y-axis
4. transform:skew(), in deg, is tilted along the x axis by default
skewX() defines the tilt conversion by setting the value of the X axis
skewY() defines the tilt conversion by setting the value of the Y axis
skew(30deg, 130deg) defines 2D tilt
5. Transform: perforctive() depth of field is used to set the distance between the user's eyes and the image. The larger the value, the smaller the image
6. Transform origin: X, y} sets the base point (reference point) of element movement. By default, it is the center point of the element. The units can be percentage, em and px; The value of xy can also be left/right/top/bottom/center
7. Exercise:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 600px;
height: 500px;
margin: auto;
}
.box_cen {
width: 400px;
height: 300px;
background: url("image/box_img2.png") no-repeat;
background-size: cover;
position: relative;
top: 100px;
left: 100px;
}
.img_2 {
position: relative;
top: 120px;
left: -100px;
opacity: 0;
transition: all 1s;
}
.img_3 {
position: relative;
top: 100px;
left: 350px;
opacity: 0;
transition: all 1s;
}
h1 {
width: 400px;
height: 50px;
color: blue;
text-align: center;
position: relative;
top: -150px;
left: -0;
opacity: 0;
transition: all 1s;
}
.box_cen:hover h1 {
position: relative;
top: -80px;
left: 0;
opacity: 1;
}
.box_cen:hover .img_2 {
position: relative;
top: 120px;
left: 150px;
opacity: 1;
}
.box_cen:hover .img_3 {
position: relative;
top: 100px;
left: 90px;
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="box_cen">
<img src="image/l_o.png" class="img_2">
<img src="image/r_f.png" class="img_3">
<h1>Business consulting planning</h1>
</div>
</div>
</body>
</html>2, 3D conversion
1. transform:translateZ() defines 3D conversion, and only sets the value of Z axis,
translate3d(10px,20px,30px) defines 3D translation
2. Define 3D: Transform
3. transform:skew3d() defines 3D scaling
3, About 3D related properties
1. Transform style: flat (default, all elements are displayed in 2D plane) / preserve-3d (all child elements are displayed in 3D space) Note: Transform style needs to be set in the parent element and higher than any nested variable element
2. Backface visibility: Hidden / visible (the default value indicates that the reverse side is visible) determines whether the element rotates and the back side is visible. For non rotating elements, the front side faces the audience. When it rotates about 180 degrees along the y axis, the back side of the element faces the audience
3D exercise: (making cubes)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cube 1</title>
<style>
section{
width: 500px;
height: 500px;
margin: 200px auto;
position: relative;
transform: rotateX(30deg) rotateY(30deg);
transform-style: preserve-3d;
}
div{
width: 500px;
height: 500px;
position: absolute;
font-size: 100px;
text-align: center;
line-height: 500px;
opacity: 0.6;
}
section div:nth-child(1){
background: skyblue;
transform: translateZ(250px);
}
section div:nth-child(2){
background: gold;
transform: translateY(-250px) rotateX(90deg);
}
section div:nth-child(3){
background: greenyellow;
transform: translateZ(-250px);
}
section div:nth-child(4){
background: pink;
transform: translateY(250px) rotateX(-90deg);
}
section div:nth-child(5){
background: blue;
transform: translateX(-250px) rotateY(-90deg);
}
section div:nth-child(6){
background: purple;
transform: translateX(250px) rotateY(90deg);
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</section>
</body>
</html>