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转换之缩放，图片，按钮缩放案例
-
缩放
<!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; /* 设置盒子的缩放是按照哪个中心点进行缩放的，如果没有设置的话默认是以中心点 */ /* transform-origin: left bottom; */ } div:hover { /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍 */ /* transform: scale(x, y); */ /* transform: scale(2, 2); */ /* 2. 修改了宽度为原来的2倍 高度 不变 */ /* transform: scale(2, 1); */ /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽度修改了2倍，高度默认和第一个参数一样*/ /* transform: scale(2); */ /* 4. 我们可以进行缩小 小于1 就是缩放 */ /* transform: scale(0.5, 0.5); */ /* transform: scale(0.5); */ /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/ /* width: 300px; height: 300px; */ transform: scale(2); } .test { height: 200px; width: 200px; background-color: aqua; transform-origin: left top; } .test:hover { transform: scale(0.5); } </style> </head> <body> <div></div> <p class="test"></p> 123123 </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; 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>结果如下：
-
分页按钮放大
<!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>
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>
结果如下：
