下面我们来看一下css设置鼠标放到图片上时图片移动效果：
<!DOCTYPE html>
<html>
<head>
<style>
img{width:200px;
height:200px;}
.stage{
width:200px;
height:200px;
border:1px solid red;
margin:100px auto;
perspective:1000px;
perspective-origin:50%;
}
.con{
width:200px;
height:200px;
transform-style:preserve-3d;
transition:1s linear;
}
.stage:hover .con{
transform:translatex(150px);
}
</style>
</head>
<body>
<div class="stage">
<div class="con">
<img src="img/3.webp">
</div>
</div>效果图：
css使用:hover伪类在图片上设置transform:translatex(x);样式，使鼠标移动到图片上时图片移动。transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform属性：
语法：
transform: none|transform-functions;
以上就是css怎么移动图片？的详细内容，更多请关注易知道|edz.cc其它相关文章！
