6-web前端的特效 平面转换transfrom
平面转换 transform
![](https://img2023.cnblogs.com/blog/3277805/202309/3277805-20230919121118811-2003233508.png)
平面转换又叫 2D 转换
1、平面转换----平移
transform: translate(水平移动距离, 垂直移动距离);
取值(正负均可):
1.像素单位数值
2.百分比(参照物为盒子自身尺寸)
注意:X轴正向为右,Y轴正向为下
技巧:
1.translate()如果只给出一个值, 表示x轴方向移动距离
2.单独设置某个方向的移动距离:translateX() & translateY()
总结:
- 给盒子添加向左、向上的位移效果,属性取值为正还是负?负
- translate() 只写一个值表示哪个方向移动?水平(X 轴)
- 百分比取值参
1)平面实现居中效果
将块放置页面中央
核心代码:
代码示例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 1366px; height: 600px; /* */ position: relative; margin: 100px auto; background-image: url(./bg.jpg); } .left{ background-image: url(./fm.jpg); width:50% ; height: 100%; position: absolute; top: 0; left: 0; transition: all 1s; } .right{ width: 50%; height: 100%; background-image: url(./fm.jpg); background-position: right; position: absolute; top: 0; right:0; transition: all 1s; } .box:hover .left{ transform: translateX(-100%); } .box:hover .right{ transform: translateX(100%); } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
鼠标移入
2、平面转换-----旋转
transform: rotate(角度);
注意:角度单位是deg
技巧:取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转素旋转效果
代码示例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border: 1px solid red; margin: 100px auto; position: relative; } img{ position: absolute; width: 100%; height: 100%; transition: all 2s; } .box:hover img{ transform: rotate(360deg); } </style> </head> <body> <div class="box"><img src="./rotate.png" alt=""></div> </body> </html>
3、平面转换------缩放
思考: 改变元素的width或height属性能实现吗?
语法:
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧:
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
案例: 播放按钮
相关代码:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .div{ width: 249px; height: 140px; /* */ margin: 100px auto; position: relative; } .div .img img{ width: 100%; height: 100%; } .div .stop{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(6); opacity: 0; transition: all 0.5s; } .div:hover .stop{ transform: translate(-50%,-50%) scale(1); opacity: 1; } </style> <body> <div class="div"> <div class="img"><img src="./party.jpeg" alt=""></div> <div class="stop"><img src="./play.png" alt=""></div> </div> </body> </html>
相关知识点:
样式
居中
效果
缩放
透明度(opacity)
4、平面转换-----倾斜
属性
transform: skew();
取值
角度度数 deg
5、渐变
渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景
分类
线性渐变:
径向渐变:
1.线性渐变
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置, ......
);
取值
渐变方向:可选
to 方位名词,
角度度数
终点位置:可选
百分比
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
2.径向渐变
作用:给按钮添加高光效果
属性
代码所示:background-image: radial-gradient(
半径 at 圆心位置, 颜色1 终点位置, 颜色2 终点位置, ...... );
取值
半径可以是2条,则为椭圆,
圆心位置取值:像素单位数值 / 百分比 / 方位名词