<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 1000px; margin:100px auto; } .box>div{ width: 300px; height:150px; border: 1px solid #000; background-color: red; float: left; margin-right: 30px; } div:nth-child(2){ background-color: pink; transition:all 1s; } /* translate:(水平位移，垂直位移)； 正值：向右向下 负值：向左向上 如果只写一个值 水平移动 百分比 ：相对于自身移动 */ div:nth-child(2):hover{ transform:translate(-50%,-50%); } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </body> </html>