当前位置：首页 > news >正文

WEBSTORM前端 —— 第3章：移动 Web —— 第1节：平面转换、渐变

news 2025/5/14 7:51:07

一.平面转换

二.平面转换 – 平移

①属性

②取值

③技巧

三.平移实现居中效果

四.案例——双开门效果

五.平面转换 – 旋转

①属性

②技巧

六.平面转换 – 改变转换原点

①属性

②取值

七.案例-时钟

八.平面转换 – 多重转换

九.平面转换 – 缩放

①属性

②技巧

十.平面转换 – 倾斜

①属性

②取值

十一.渐变

1.线性渐变

①属性

②取值

2.径向渐变

一.平面转换

平面转换 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>

效果图：