- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
2D conversion
- Transform is one of the subversive features in CSS3, which can implement elements:
- Scale: scale
- Move: translate
- Rotate: rotate
- Tilt: skew
2D conversion mobile translate
- 2D movement is a function of 2D conversion, which can change the position of elements on the page, similar to positioning
- grammar:
transform: translate(x,y);
- Case
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */ div { width: 200px; height: 200px; background-color: pink; x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔 transform: translate(x, y); transform: translate(100px, 100px); 1. 我们如果只移动x坐标 transform: translate(100px, 0); transform: translateX(100px); 2. 我们如果只移动y坐标 transform: translate(0, 100px); transform: translateY(100px); div:first-child { transform: translate(30px, 30px); } div:last-child { background-color: purple; }
to sum up
- Define the 2D transformation, move the element along the X and Y axis
- The percentage unit in translate is translate relative to its own element: (50%, 50%);
- Translate is similar to positioning and does not affect the position of other elements
- No effect on inline labels
Case
<!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> div { position: relative; width: 500px; height: 500px; background-color: pink; /* 1. 我们tranlate里面的参数是可以用 % */ /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */ /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */ transform: translateX(50%); } p { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: purple; /* margin-top: -100px; margin-left: -100px; */ /* translate(-50%, -50%) 盒子往上走自己高度的一半 */ transform: translate(-50%, -50%); } span { /* translate 对于行内元素是无效的 */ transform: translate(300px, 300px); } </style> </head> <body> <div> <p></p> </div> <span>123</span> </body> </html>
Rotation of 2D conversion
- 2D rotation refers to rotating the element clockwise or counterclockwise in a 2-dimensional plane.
- grammar:
transform:rotate(angle)
- Case:
img { width: 150px; /* 顺时针旋转45度 */ /* transform: rotate(45deg); */ border-radius: 50%; border: 5px solid pink; /* 过渡写到本身上，谁做动画给谁加 */ transition: all 0.3s; } img:hover { transform: rotate(360deg); }
- to sum up
- When the angle is positive, it is clockwise, when it is negative, it is counterclockwise
- The center point of the default rotation is the center point of the element
-
Case: CSS3 writing triangle
div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s; } /* 鼠标经过div 里面的三角旋转 */ div:hover::after { transform: rotate(225deg); }
Set the center of rotation
/* 设置旋转中心点*/ transform-origin: x y;
- Case:
div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; 1.可以跟方位名词 transform-origin: left bottom; 2. 默认的是 50% 50% 等价于 center center 3. 可以是px 像素 transform-origin: 50px 50px; } div:hover { transform: rotate(360deg); }
- Case 2:
<!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> div { overflow: hidden; width: 200px; height: 200px; border: 1px solid pink; margin: 10px; float: left; } div::before { content: "佩奇"; display: block; width: 100%; height: 100%; background-color: hotpink; transform: rotate(180deg); transform-origin: left bottom; transition: all 0.4s; } /* 鼠标经过div 里面的before 复原 */ div:hover::before { transform: rotate(0deg); } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
2D conversion scale
transform:scale(x,y);transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大 transform:scale(2,2) ：宽和高都放大了2倍 transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2) transform:scale(0.5,0.5)：缩小
- Case: picture enlargement
<!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> div { overflow: hidden; float: left; margin: 10px; } div img { transition: all .4s; } div img:hover { transform: scale(1.1); } </style> </head> <body> <div> <a href="#"><img src="media/scale.jpg" alt=""></a> </div> <div> <a href="#"><img src="media/scale.jpg" alt=""></a> </div> <div> <a href="#"><img src="media/scale.jpg" alt=""></a> </div> </body> </html>
- Case: Paging button
<!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> li { float: left; width: 30px; height: 30px; border: 1px solid pink; margin: 10px; text-align: center; line-height: 30px; list-style: none; border-radius: 50%; cursor: pointer; transition: all .4s; } 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>
2D conversion comprehensive writing sequence
- Use multiple conversions at the same time, the format is: transform: translate() rotate() scale() ... etc. The order will affect the effect of the conversion . (Rotating first will change the direction of the coordinate axis)
/* transform: rotate(180deg) translate(150px, 50px); */ /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */ transform: translate(150px, 50px) rotate(180deg) scale(1.2);