2D-定位，旋转，缩放

a-tao必须奥利给

2024-04-24 帮助1人

2D-定位，旋转，缩放

1. 移动盒子的位置，定位

<!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>
/* 移动盒子的位置：定位盒子的外边距 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:nth-child(2) {
background-color: purple;
}
div:nth-child(3) {
transform: translate(100px, 200px);
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

测试结果如下：

学新通

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 {
/* 父盒子是相对的 */
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>

测试结果如下：

学新通

3.2D转换之 rotate

<!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>
img {
width: 400px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="media/pic.jpg" alt="">
</body>
</html>

学新通

4. css3 用代码的方式搞一个三角形

<!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: 249px;
height: 35px;
border: 1px solid #000;
}
/* 设置在div的后面放置 > 的位置和角度 */
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
/* 将正方形的右边和下边正方向旋转45deg */
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
/* 当鼠标进过这里的时候，旋转 */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

测试结果如下：

学新通

5. 设置元素旋转的中心点

<!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 {
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 参数可以设置旋转的中心点这里设置的是正方形的中心; */
transform-origin: 50% 50%;
/* transform-origin: 50px 50px; */
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

<!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;
/* 开始就旋转 180deg ，然后再当鼠标经过的时候，变成原貌即可 */
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>

测试结果如下：

学新通

6. 2D转换之缩放，图片，按钮缩放案例

缩放
1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
8. <title>Document</title>
9. <style>
10. div {
11. width: 200px;
12. height: 200px;
13. background-color: pink;
14. margin: 100px auto;
15. /* 设置盒子的缩放是按照哪个中心点进行缩放的，如果没有设置的话默认是以中心点 */
16. /* transform-origin: left bottom; */
17. }
19. div:hover {
20. /* 1. 里面写的数字不跟单位就是倍数的意思 1 就是1倍 2就是 2倍 */
21. /* transform: scale(x, y); */
22. /* transform: scale(2, 2); */
23. /* 2. 修改了宽度为原来的2倍高度不变 */
24. /* transform: scale(2, 1); */
25. /* 3. 等比例缩放同时修改宽度和高度，我们有简单的写法以下是宽度修改了2倍，高度默认和第一个参数一样*/
26. /* transform: scale(2); */
27. /* 4. 我们可以进行缩小小于1 就是缩放 */
28. /* transform: scale(0.5, 0.5); */
29. /* transform: scale(0.5); */
30. /* 5. scale 的优势之处：不会影响其他的盒子而且可以设置缩放的中心点*/
31. /* width: 300px;
32. height: 300px; */
33. transform: scale(2);
34. }
36. .test {
37. height: 200px;
38. width: 200px;
39. background-color: aqua;
40. transform-origin: left top;
41. }
43. .test:hover {
44. transform: scale(0.5);
45. }
46. </style>
48. </head>
50. <body>
51. <div></div>
52. <p class="test"></p>
53. 123123
54. </body>
56. </html>
图片放大案例
1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
8. <title>Document</title>
9. <style>
10. div {
11. overflow: hidden;
12. float: left;
13. margin: 10px;
14. }
16. div img {
17. transition: all .4s;
18. }
20. div img:hover {
21. transform: scale(1.1);
22. }
23. </style>
24. </head>
26. <body>
27. <div>
28. <a href="#"><img src="media/scale.jpg" alt=""></a>
29. </div>
30. <div>
31. <a href="#"><img src="media/scale.jpg" alt=""></a>
32. </div>
33. <div>
34. <a href="#"><img src="media/scale.jpg" alt=""></a>
35. </div>
36. </body>
38. </html>
结果如下：
分页按钮放大
1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
8. <title>Document</title>
9. <style>
10. li {
11. float: left;
12. width: 30px;
13. height: 30px;
14. border: 1px solid pink;
15. margin: 10px;
16. text-align: center;
17. line-height: 30px;
18. list-style: none;
19. border-radius: 50%;
20. cursor: pointer;
21. transition: all .4s;
22. }
24. li:hover {
25. transform: scale(1.2);
26. }
27. </style>
28. </head>
30. <body>
31. <ul>
32. <li>1</li>
33. <li>2</li>
34. <li>3</li>
35. <li>4</li>
36. <li>5</li>
37. <li>6</li>
38. <li>7</li>
39. </ul>
40. </body>
42. </html>

8. 2D转换之综合写法

<!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 {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

结果如下：

学新通

这篇好文章是转载于：学新通技术网

2D-定位，旋转，缩放

2D-定位，旋转，缩放

1. 移动盒子的位置，定位

2、让盒子水平居中和垂直居中的方法二

3.2D转换之 rotate

4. css3 用代码的方式搞一个三角形

5. 设置元素旋转的中心点

6. 2D转换之缩放，图片，按钮缩放案例

8. 2D转换之综合写法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

2D-定位，旋转，缩放

2D-定位，旋转，缩放

1. 移动盒子的位置，定位

2、 让盒子水平居中和垂直居中的方法二

3.2D转换之 rotate

4. css3 用代码的方式搞一个三角形

5. 设置元素旋转的中心点

6. 2D转换之缩放，图片，按钮缩放案例

8. 2D转换之综合写法

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

2、让盒子水平居中和垂直居中的方法二