属性:
transform:translate(x轴移动距离，y轴移动距离)
取值：
- 像素单位取值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #333;
}
.son {
width: 200px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
.father:hover .son {
transform: translate(200px, 100px);
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
当鼠标拖到大盒子里时，粉色的盒子开始平移。
技巧：
- translate()只写一个值，表示沿着X轴移动
- 单独设置X或Y轴移动距离：translateX()或translateY()
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
