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

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

news 来源：原创 2025/5/13 5:38:30

目录

一.平面转换

二.平面转换 – 平移

①属性

②取值

③技巧

三.平移实现居中效果

 四.案例——双开门效果

五.平面转换 – 旋转

①属性

②技巧

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

①属性

②取值

七.案例-时钟

八.平面转换 – 多重转换

九.平面转换 – 缩放

①属性

②技巧

十.平面转换 – 倾斜

①属性

②取值

十一.渐变

1.线性渐变

①属性

②取值

2.径向渐变

一.平面转换

平面转换 transform

  1. 作用：为元素添加动态效果，一般与过渡配合使用
  2. 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
  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>体验平面转换</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>

效果图：

相关文章：

  • 快消品商超业务单据解决方案重塑KA商超、电商业务与SAP ERP协同效率
  • 动态人脸识别教学实训沙盘功能介绍
  • 扩展：React 项目执行 yarn eject 后的 package.json 变化详解及参数解析
  • Linux进程10-有名管道概述、创建、读写操作、两个管道进程间通信、读写规律(只读、只写、读写区别)、设置阻塞/非阻塞
  • Spark处理过程-转换算子和行动算子
  • Lodash isEqual 方法源码实现分析
  • Spring Cloud Sleuth 链路追踪
  • Java面试高阶篇：Spring Boot+Quarkus+Redis高并发架构设计与性能优化实战
  • ZYNQ笔记（二十）：Clocking Wizard 动态配置
  • 【开源工具】深度解析：基于PyQt6的Windows时间校时同步工具开发全攻略
  • bazel迁移cmake要点及具体迁移工程示例(apollo radar)
  • 技术视界 | 青龙机器人训练地形详解（四）：复杂地形精讲之斜坡
  • 智表 ZCELL 插件快速入门指南（原创）
  • 详解 IRC协议 及客户端工具 WeeChat 的使用
  • 华为ensp实现跨vlan通信
  • 全视通智慧病房无感巡视解决方案：科技赋能，重塑护理巡视新篇
  • 【数据结构】——队列
  • web:InfiniteScroll 无限滚动
  • iOS safari和android chrome开启网页调试与检查器的方法
  • 基于Vue3.0的高德地图api教程005：实现绘制线并编辑功能
  • 【社论】人工智能将为教育带来什么
  • 科学家用AI寻找外星生命
  • “不为一时一事所惑，不为风高浪急所扰”——习近平主席对俄罗斯进行国事访问并出席纪念苏联伟大卫国战争胜利80周年庆典纪实
  • 汇源果汁发文：经营情况一切正常
  • 新买宝马竟是“维修车”，男子发视频维权被4S店索赔100万
  • 欧盟公布关税反制清单，瞄准美国飞机、汽车等产品