1、平面转换-平移
取值
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
技巧
- translate()只写一个值，表示沿着X轴移动
- 单独设置X或Y轴移动距离：translateX()或translateY()
<!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: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}/* 鼠标移入到父盒子，son改变位置 */.father:hover .son {transform: translate(200px, 100px);/* 取值是百分比：参照盒子自身尺寸计算结果 */transform: translate(50%, 100%);transform: translate(-50%, 100%);/* 只写一个数表示水平方向 */transform: translate(100%);transform: translateY(100%);transform: translateX(100%);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>2、平移实现居中效果
方法一：
方法二：百分比参照盒子自身尺寸计算结果
3、案例 双开门效果
<!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>* {margin: 0;padding: 0;}/* 1. 布局：父子结构，父级是大图，子级是左右小图*/.father {display: flex;margin: 0 auto;width: 1300px;height: 600px;background-image: url(../photo/1.jpg);overflow: hidden;}.father .left,.father .right {width: 50%;height: 600px;background-image: url(../photo/2.jpg);transition: all .5s;}.father .right {/* right 表示的取到精灵图右面的图片 */background-position: right 0;}/* 2. 鼠标悬停的效果：左右移动 */.father:hover .left {transform: translate(-100%);}.father:hover .right {transform: translate(100%);}</style>
</head>
<body><div class="father"><div class="left"></div><div class="right"></div></div>
</body>
</html>
