目录
一.平面转换
平面转换 transform
- 作用：为元素添加动态效果，一般与过渡配合使用
- 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
- 平面转换又叫 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>体验平面转换</title>
<style>
div {
margin: 100px 0;
width: 100px;
height: 100px;
background-color: pink;
transition: all 1s;
}
/* 鼠标滑过：添加动态效果 */
div:hover {
transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
体验平面转换
二.平面转换 – 平移
①属性
transform: translate(X轴移动距离, Y轴移动距离);
②取值
◆ 像素单位数值
◆ 百分比（参照盒子自身尺寸计算结果）
◆ 正负均可
③技巧
◆ translate() 只写一个值，表示沿着 X 轴移动
◆ 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
<!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>
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
width: 200px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
/* 鼠标移入到父盒子，son改变位置 */
.father:hover .son {
transform: translate(200px, 100px);
/* 百分比：参照盒子自身尺寸计算结果 */
transform: translate(50%, 100%);
transform: translate(-50%, 100%);
/* 只写一个数表示水平方向 */
transform: translate(100px);
transform: translateY(100px);
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="father"><div class="son"></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>绝对定位元素居中效果</title>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
/* 向左向上移动自身尺寸的一半 */
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></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>双开门</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1. 布局：父子结构，父级是大图，子级是左右小图 */
.father {
display: flex;
margin: 0 auto;
width: 1366px;
height: 600px;
background-image: url(./images/bg.jpg);
overflow: hidden;
}
.father .left,
.father .right {
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all .5s;
}
.father .right {
/* right 表示的取到精灵图右面的图片 */
background-position: right 0;
}
/* 2. 鼠标悬停的效果：左右移动 */
.father:hover .left {
transform: translate(-100%);
}
.father:hover .right {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>五.平面转换 – 旋转
①属性
transform: rotate(旋转角度);
◆ 角度单位是 deg
②技巧
◆ 取值正负均可
◆ 取值为正，顺时针旋转
◆ 取值为负，逆时针旋转
<!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>
img {
width: 200px;
transition: all 2s;
}
/* 鼠标悬停到图片上面，添加旋转效果 */
img:hover {
/* 正数：顺时针旋转；负数：逆时针旋转 */
transform: rotate(360deg);
transform: rotate(-360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>效果图：
平面转换 – 旋转
六.平面转换 – 改变转换原点
默认情况下，转换原点是盒子中心点
①属性
transform-origin: 水平原点位置 垂直原点位置;
②取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比
<!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>
img {
width: 200px;
border: 1px solid #000;
transition: all 1s;
transform-origin: right bottom;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>效果图：
平面转换 – 改变转换原点
七.案例-时钟
效果图：
<!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>
.clock {
width: 250px;
height: 250px;
border: 8px solid #000;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
.line {
/* 1.定位 */
position: absolute;
width: 4px;
height: 250px;
background-color: #999;
left: 50%;
transform: translate(-50%);
}
/* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 */
/* 一圈是360度, 等分成 xx 份 */
.line:nth-child(2) {
transform: translate(-50%) rotate(30deg);
}
.line:nth-child(3) {
transform: translate(-50%) rotate(60deg);
}
.line:nth-child(4) {
transform: translate(-50%) rotate(90deg);
}
.line:nth-child(5) {
transform: translate(-50%) rotate(120deg);
}
.line:nth-child(6) {
transform: translate(-50%) rotate(150deg);
}
/* 第一根和第四跟宽度大一些 */
.line:nth-child(1),
.line:nth-child(4) {
width: 5px;
}
/* 遮罩圆形 */
.cover {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 50%;
}
/* 表针 */
/* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 */
.hour,
.minute,
.second {
position: absolute;
left: 50%;
/* 盒子底部在盒子中间 */
bottom: 50%;
}
.hour {
width: 6px;
height: 50px;
background-color: #333;
margin-left: -3px;
transform: rotate(15deg);
transform-origin: center bottom;
}
.minute {
width: 5px;
height: 65px;
background-color: #333;
margin-left: -3px;
transform: rotate(90deg);
transform-origin: center bottom;
}
.second {
width: 4px;
height: 80px;
background-color: red;
margin-left: -2px;
transform: rotate(240deg);
transform-origin: center bottom;
}
/* 螺丝 */
.dotted {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background-color: #333;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="clock">
<!-- 刻度线 -->
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<!-- 遮罩圆形 -->
<div class="cover"></div>
<!-- 表针 -->
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<!-- 螺丝 -->
<div class="dotted"></div>
</div>
</body>
</html>
八.平面转换 – 多重转换
①多重转换技巧：先平移再旋转
transform: translate() rotate();
②多重转换原理：以第一种转换方式坐标轴为准转换形态
➢ 旋转会改变网页元素的坐标轴向
➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
<!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>
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 200px;
transition: all 5s;
}
/* 鼠标移入box，图片边走边转 */
.box:hover img {
/* 先平移再旋转 */
transform: translate(600px) rotate(360deg);
/* 旋转会改变坐标轴向 */ /* 多重转换：以第一种转换形态的坐标轴为准 */
/* transform: rotate(360deg) translate(600px); */
/* 层叠性 */
/* transform: translate(600px);
transform: rotate(360deg); */
}
</style>
</head>
<body>
<div class="box"><img src="./images/tyre1.png" alt="" /></div>
</body>
</html>效果图：
平面转换 – 多重转换
九.平面转换 – 缩放
①属性
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
②技巧
- 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大，取值小于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>
.box {
width: 300px;
height: 210px;
margin: 100px auto;
background-color: pink;
}
.box img {
width: 100%;
transition: all 0.5s;
}
.box:hover img {
/* 修改宽高尺寸，从左上角开始缩放 */
/* width: 500px;
height: 400px; */
/* 大于1，表示放大 */
transform: scale(2);
/* 小于1，表示缩小 */
transform: scale(0.5);
/* 等于1，不变 */
transform: scale(1);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpeg" alt="" />
</div>
</body>
</html>效果图：
十.平面转换 – 倾斜
①属性
transform: skew();
②取值
角度度数 deg
<!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 {
margin: 100px auto;
width: 100px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:hover {
transform: skew(30deg);
transform: skew(-30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
平面转换 – 倾斜
十一.渐变
①渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
②分类
- 线性渐变
- 径向渐变
1.线性渐变
①属性
background-image : linear-gradient (渐变方向 ,颜色 1 终点位置 ,颜色 2 终点位置 ,......);
②取值
◆ 渐变方向： 可选
- to 方位名词
- 角度度数
◆ 终点位置： 可选
- 百分比
<!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: green;
background-image: linear-gradient(red, green);
background-image: linear-gradient(to right, red, green);
background-image: linear-gradient(45deg, red, green);
background-image: linear-gradient(red 80%, green);
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
2.径向渐变
①作用：给按钮添加高光效果
②属性
background-image : radial-gradient (半径 at 圆心位置 ,颜色 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>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(50px at center center, red, pink);
background-image: radial-gradient(50px 20px at center center, red, pink);
background-image: radial-gradient(50px at 50px 30px, red, pink 50%);
}
button {
width: 100px;
height: 40px;
background-color: green;
border: 0;
border-radius: 5px;
color: #fff;
background-image: radial-gradient(30px at 30px 20px,
rgba(255, 255, 255, 0.2), transparent);
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
</body>
</html>效果图：
