一.位移
语法:
transform:translate(水平移动距离,垂直移动距离)
取值(正负均可):像素单位数值或者百分比 (参照物为盒子自身尺寸)
注意: X轴正向为右,Y轴正向为下,如图所示:
技巧:
- translate()如果只给出一个值,表示x轴方向移动距离
- 单独设置某个方向的移动距离: translateX() 与 translateY() 注意XY要大写
注意点:如果同时设置 translateX() 和 translateY(),那么只生效最下面的一个,也就是说只会在单方向上移动,不会出现两个方向同时移动的情况,要同时移动需要translate()写法。
示例(盒子居中):
<!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>
.father {
position: relative;
width: 311px;
height: 311px;
background-color: pink;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 111px;
height: 111px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
二.缩放
目的:使用scale改变元素尺寸,基于中心缩放,不同于直接再设宽高(类似基于左上角缩放)
场景:一般会使用绝对定位居中覆盖在盒子上面,根据具体需求放大缩小绝对定位的盒子,将其隐藏,再使用鼠标悬停显示绝对定位的盒子的内容再根据需求放大缩小,增加用户体验感。
语法:transform:scale(x轴缩放倍数,y轴缩放倍数);
技巧:
- 一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放,transform: scale(缩放倍数);
- scale值大于1表示放大,scale值小于1表示缩小
三.旋转
目标: 使用rotate实现元素旋转效果
语法:transform:rotate(角度)
注意:角度单位是deg
技巧:
取值为正,则顺时针旋转;取值为负,则逆时针旋转
示例:
<!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>
.father {
width: 1111px;
height: 311px;
background-color: pink;
overflow: hidden;
}
.son {
width: 111px;
height: 111px;
background-color: skyblue;
transition: all 2s;
}
.father:hover .son {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
四.多重转换
多重转换指的是多种转换配合使用,这里给出位移配合旋转做出的效果,但有要注意的是:transform复合属性连写带旋转的放在最后,因为旋转会改变坐标轴向;同时也不能单独写这样会因为层叠性只生效最下面的transform
代码如下:
<!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>
.father {
width: 1111px;
height: 311px;
background-color: pink;
overflow: hidden;
}
.son {
width: 111px;
height: 111px;
background-color: skyblue;
transition: all 2s;
}
.father:hover .son {
transform: rotate(360deg);
/* 多重转换:transform复合属性连写带旋转的放在最后,因为旋转会改变坐标轴向;同时也不能单独写这样会因为层叠性只生效最下面的transform */
transform: translate(500px) rotate(720deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
四.转换原点
目标: 使用transform-origin属性改变转换原点,默认原点是盒子中心点
场景:比如风车是绕着中心点转动,而时钟的秒针是绕着底部进行旋转
语法:
transform-origin: 原点水平位置 原点垂直位置;
取值(方位名词比较常用):
方位名词 (left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)
注意点:添加给元素本身,不要添加到hover
示例: