1.平面转换
使用 transform 属性实现元素的位移、旋转、缩放等效果
-
2D转换
-
2D转换是改变标签在二维平面上的位置和形状
-
移动：translate
-
旋转：rotate
-
缩放：scale
-
1.1位移translate
-
translate语法
-
x就是X轴上水平移动，正向为右
-
y就是y轴上水平移动，正向为下
-
单独设置某个方向的移动距离：translateX() & translateY()
-
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
-
重点知识点
-
取值，正负均可，像素单位
-
百分比（是相对于本身的宽度和高度来进行计算的）
-
2D的移动主要是指水平、垂直方向上的移动
-
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>位移-基本使用</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;
}
.father:hover .son {
/* 百分比（是相对于本身的宽度和高度来进行计算的） */
transform: translate(100%, 50%);
/* transform: translate(100px,50px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(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>
.father {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
/* 用translate比较方便，适用于宽高不是整数值 */
transform: translate(-50%,-50%);
width: 203px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('./images/bg.jpg');
overflow: hidden;
overflow: hidden;
}
.box::before,
.box::after {
content: '';
float: left;
width: 50%;
height: 600px;
background: url(./images/fm.jpg);
transition: all .5s;
}
.box::after {
/* 取右边图 */
background-position: right 0;
}
/* 鼠标移动的时候的位置改变的效果 */
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translate(100%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材）
1.2 2D 转换之rotate旋转
-
rotate旋转
-
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
-
/* 单位是：deg */
img:hover {
transform: rotate(360deg)
}
-
rotate语法
-
rotate里面跟度数，单位是deg -
角度为正时，顺时针，角度为负时，逆时针
-
默认旋转的中心点是元素的中心点
-
-
设置元素旋转的中心的(transform-origin)--可改变转换的原点
（D:\前端基础\2023寒假web学习\题目\2移动web开发\素材(1)\素材）
transform-origin: x y;
-
取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
-
注意- 默认圆点是盒子中心点
-
后面的参数 x 和 y 用空格隔开
-
x y 默认旋转的中心点是元素的中心(50% 50%),等价于center 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: 250px;
transition: all .5s;
border: 1px solid #000;
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 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 3s;
}
.box:hover img {
/* 边走边转 */
/* 正确走法 */
transform: translate(600px) rotate(360deg);
/* 错误，沿着旋转的路在水平走600px */
/* 旋转会改变坐标轴方向 */
/* transform: rotate(360deg) translate(600px); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre1.png" alt="">
</div>
</body>
</html>1.3 2D 转换之scale缩放
-
scale的作用：用来控制元素的放大与缩小
transform: scale(x, y)
-
知识要点：-
注意，x（x轴缩放倍数）与y（y轴缩放倍数）之间用逗号进行分隔
-
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大 -
transform: scale(2, 2): 宽和高都放大了二倍 -
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致 -
transform:scale(0.5, 0.5): 缩小 -
scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
-
div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
2D 转换综合写法以及顺序问题
知识要点
-
同时使用多个转换，其格式为
transform: translate() rotate() scale() -
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-
当我们同时有位置或者其他属性的时候，要将位移放到最前面
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}2.渐变
（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(2)\素材（渐变））
使用backgroung-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
background-image: linear-gradient(
颜色1,
颜色2
);3.综合案例：
1. D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.2.5作业\作业\03-华为新闻综合案例
2225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
