使用transform属性可以实现元素的位移、旋转、缩放等效果
- 改变盒子在平面内的形态
- 2D转换
注意：在使用转换前，都需要给元素添加一个过渡效果：transition: all 0.5s;
位移
使用 translate实现元素的位移。
语法：
transform: translate(100px, 50px);
或：
transform: translate(100%, 50%);
利用百分比来写的话，取的是移动元素本身的百分比。
取值：
水平方向正值指向右，负值指向左。
垂直方向正值指向下，负值指向上。
即上左下右原则。
双开门
双开门效果便是，鼠标移入之后，会有一个向两边打开门的效果。
| <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属性实现元素的旋转效果。
语法：
transform:rotate(旋转角度)
注意：角度的单位是 deg
取值：正负度数取值，正为顺时针旋转，负为逆时针旋转。
| <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:原点水平位置 原点垂直位置;
取值：方位名词、像素、百分比(参照盒子自身尺寸)
| <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();
多重转换中，一般先写位移再写旋转，因为旋转会改变网页元素的坐标轴向，如果先写旋转则后面的转换效果的轴向以旋转后的轴向为准，会影响到转换效果。
| <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改变元素的尺寸，即元素的宽度和高度。
语法：
transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下，只为 scale设置一个值，表示x轴和y轴等比例缩放。
transform:scale(缩放倍数);
scale的取值大于1表示放大，小于1表示缩小。
注意：在操作缩放属性时需要注意层叠性。