使用transform属性可以实现元素的位移、旋转、缩放等效果
- 改变盒子在平面内的形态
- 2D转换
注意：在使用转换前，都需要给元素添加一个过渡效果：transition: all 0.5s;
位移
使用 translate实现元素的位移。
语法：
代码语言：javascript复制transform: translate(100px, 50px);或：
代码语言：javascript复制transform: translate(100%, 50%);利用百分比来写的话，取的是移动元素本身的百分比。
取值：
水平方向正值指向右，负值指向左。
垂直方向正值指向下，负值指向上。
即上左下右原则。
双开门
双开门效果便是，鼠标移入之后，会有一个向两边打开门的效果。
代码语言：javascript复制<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('https://pic.zeyiwl.cn/yunimg/20220116091748.jpg');
overflow: hidden;
}
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url('https://pic.zeyiwl.cn/yunimg/20220116091739.jpg');
transition: all .5s;
}
.box::after {
/* 右侧盒子的背景图 */
background-position: right 0;
}
/* 鼠标移入的时候的位置改变的效果 */
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>右侧盒子的背景图使用 background-position: right 0;实现。
left和right分别代表向左右侧移动自身宽度。
旋转
使用 rotate属性实现元素的旋转效果。
语法：
代码语言：javascript复制transform:rotate(旋转角度)注意：角度的单位是 deg
取值：正负度数取值，正为顺时针旋转，负为逆时针旋转。
代码语言：javascript复制 <style>
img {
width: 250px;
transition: all 2s;
}
img:hover {
/* 顺 */
transform: rotate(360deg);
/* 逆 */
/* transform: rotate(-360deg); */
}
</style>
</head>
<body>
<img src="https://pic.zeyiwl.cn/yunimg/20220116092741.png" alt="">
</body>转换原点
默认原点是盒子中心点。
语法：transform-origin:原点水平位置 原点垂直位置;
取值：方位名词、像素、百分比(参照盒子自身尺寸)
代码语言：javascript复制 <style>
img {
width: 250px;
border: 1px solid #000;
transition: all 2s;
transform-origin: right bottom;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="https://pic.zeyiwl.cn/yunimg/20220116092741.png" alt="">
</body>多重转换
使用多重转换可以实现多种形态的转换，比如可以同时旋转 位移。
transform: translate() rotate();
多重转换中，一般先写位移再写旋转，因为旋转会改变网页元素的坐标轴向，如果先写旋转则后面的转换效果的轴向以旋转后的轴向为准，会影响到转换效果。
代码语言：javascript复制 <style>
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
}
img {
width: 200px;
transition: all 8s;
}
.box:hover img {
/* 边走边转 */
transform: translate(600px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="https://pic.zeyiwl.cn/yunimg/20220116143048.png" alt="">
</div>
</body>缩放
在网页中，可以使用 scale改变元素的尺寸，即元素的宽度和高度。
语法：
代码语言：javascript复制transform: scale(x轴缩放倍数, y轴缩放倍数);一般情况下，只为 scale设置一个值，表示x轴和y轴等比例缩放。
transform:scale(缩放倍数);scale的取值大于1表示放大，小于1表示缩小。
注意：在操作缩放属性时需要注意层叠性。
