这里写目录标题
1. 2D转换
1.1 2D转换之移动translate
1.1.1 translate基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translate</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 1. 沿x轴向右移动100px， 沿y轴向下移动200px */
/* transform: translate(100px, 200px); */
/* 2. 只沿x轴向右移动100px */
/* transform: translateX(100px); */
/* 3. 只沿Y轴向下移动100px */
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.1.2 translate 不会影响其他元素案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translate</title>
<style>
div {
font-size: 50px;
text-align: center;
line-height: 200px;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(50px, 50px);
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
1.2 旋转
1.2.1 基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
/* 顺时针旋转45度 */
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.2.2 添加过渡效果的旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
/* 添加过渡效果 */
transition: all 1s;
}
div:hover {
/* 顺时针旋转45度 */
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.2.3 旋转案例–三角形旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例-三角形</title>
<style>
div {
width: 100px;
height: 100px;
border: 20px solid transparent;
border-right-color: black;
border-bottom-color: black;
transform: rotate(-45deg);
transition: all 1s;
margin: 0 auto;
}
div:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.3 设置2D转换中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置2D转换中心点</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
font-size: 50px;
/* 设置旋转中心点 */
/* transform-origin: 20px 20px; */
transform-origin: left bottom;
/* 设置过渡效果 */
transition: all 1s;
margin: 200px;
}
div:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>div盒子</div>
</body>
</html>
1.3.1 旋转中心点案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置2D转换中心点</title>
<style>
div {
overflow: hidden;
width: 200px;
height: 200px;
background-color: skyblue;
border: 2px solid skyblue;
font-size: 50px;
margin: 100px auto;
}
div img {
width: 100%;
height: 100%;
/* 设置旋转中心点 */
transform-origin: left bottom;
/* 设置过渡效果 */
transition: all 1s;
transform: rotate(180deg);
}
div:hover img{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div>
<img src="xxx" alt="">
</div>
</body>
</html>
1.4 2D转换之缩放scale
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
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的优势之处: 不会影响其他的盒子而且可以设置缩放的中心点*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.4.1 放大案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大案例</title>
<style>
div {
overflow: hidden;
float: left;
border: 2px solid skyblue;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="img/true (1).jpg" alt=""></a></div>
<div><a href="#"><img src="img/true (1).jpg" alt=""></a></div>
<div><a href="#"><img src="img/true (1).jpg" alt=""></a></div>
</body>
</html>
1.5 2D旋转综合写法（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8.2D旋转综合写法</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
/* 添加过渡 */
transition: all .4s;
}
div:hover {
/* 综合写法时，千万不要将rotate放到前面，因为是按顺序执行的，要放到前面的话首先执行旋转，然后再移动，那么旋转时会改变原本的坐标导致移动的方向错误 */
transform: translate(200px) rotate(360deg) scale(.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
错误次序造成的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8.2D旋转综合写法</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
/* 添加过渡 */
transition: all .4s;
}
div:hover {
/* 错误写法造成的结果 */
transform: rotate(360deg) translate(200px) scale(.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>