Statement: The following content is a summary of personal study, the original intention is to facilitate their own study and review records. If there are any errors, please correct me!
2d conversion:
2D conversion is to change the position and shape of the label on a two-dimensional plane.
- Move: translate
- Rotate: rotate
- Scale: scale
Move: translate
ransform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
Features:
- Does not affect the position of other elements
- 100% unit is calculated relative to its own width and height
Case : When the box is centered, "the son is the same as the father", and the width and height of the middle and child box can be set when the child box is retracted. See: The box is centered in the horizontal and vertical directions on the page. Method 2
Rotate: rotate
/* 单位是：deg */
transform: rotate(度数)
Features:
- rotate is followed by the degree, the unit is deg
- When the angle is positive, clockwise, when the angle is negative, counterclockwise
- The center point of the default rotation is the center point of the element
Case:
①Realization effect: when the mouse is placed on the picture, the picture rotates 360 degrees
Code realization:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
border: 5px solid pink;
border-radius: 50%;
/* transform: rotate(45deg); */
/* 动画过渡：过渡写到自身上，谁做动画给谁加 */
transition: all 0.3s;
}
/* 鼠标经过图片时，旋转图片 */
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="imgs/q.png" alt="">
</body>
</html>
②Realization effect: when the mouse is placed on the box, the triangle rotates.
Code realization:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 50px;
border: 1px solid red;
position: relative;
}
/* 伪元素：在元素内部的后面插入内容，属于行内元素 */
.box::after {
content: "";
border-right: 1px solid black;
border-bottom: 1px solid black;
/* 设置定位后，改变元素的显示属性（不再是行内元素） */
position: absolute;
top: 15px;
right: 13px;
width: 10px;
height: 10px;
/* 旋转45度 */
transform: rotate(45deg);
/* 动画过渡 */
transition: all .3s;
}
/* 鼠标经过盒子，里面的三角旋转 */
.box:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
③Realization effect:
code realization:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
/* 溢出隐藏，不显示其他内容 */
overflow: hidden;
/* 使盒子水平排列 */
float: left;
}
.father::before {
content: "内容";
/* 伪元素是行内元素，无法设置宽高，因此转换为块状元素 */
display: block;
width: 100%;
height: 100%;
background-color: pink;
/* 以左下角为旋转中心，旋转180度 */
transform: rotate(180deg);
transform-origin: left bottom;
/* 动画过渡效果 */
transition: all .3s;
}
/* 鼠标经过盒子时，旋转0度 */
.father:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="father">
</div>
<div class="father">
</div>
<div class="father">
</div>
</body>
</html>
Scale: scale
transform: scale(x, y)
Features:
- You can set the conversion center point zoom, the default zoom is at the center point, and does not affect other boxes
- Numbers mean multiples, so there is no need to add units
Case:
①Image enlargement
Realization effect:
Code realization:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
margin: 5px;
/* 溢出隐藏 */
overflow: hidden;
}
ul li a img {
width: 200px;
/* 动画过渡 */
transition: all .4s;
}
/* 鼠标经过图片时，放大1.2倍 */
ul li a img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>
<a href="#"><img src="imgs/scene.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="imgs/scene.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="imgs/scene.jpg" alt=""></a>
</li>
</ul>
</body>
</html>
②Paging button effect
Code realization:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid skyblue;
float: left;
margin: 5px;
/* 鼠标经过变为小手样式 */
cursor: pointer;
/* 正方形变为圆形 */
border-radius: 50%;
transition: all .3s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>