将某个元素实现平移效果
/*
放射变换 平移
translate(x,y) 同时向x,y轴方向移动,正数向正方向移动,负值反之
translatex() 水平方向平移 正数向x右平移 负数向x轴的左欧平移
translatey() 正数 向y下平移,负数向y上方平移
*/
案例如下:
<style>
/* 仿射变换 */
.transition1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px 50px ;
/* 过渡动画 */
transition: all 2s ease;
}
.transition1:hover{
/*
放射变换 平移
translate(x,y) 同时向x,y轴方向移动,正数向正方向移动,负值反之
translatex() 水平方向平移 正数向x右平移 负数向x轴的左欧平移
translatey() 正数 向y下平移,负数向y上方平移
*/
transform: translate(5px,5px);
}
</style>
<body>
<div class="transition1"></div>
</body>
效果如下: