html设置使图片自动移动,css怎么移动图片？

css3功能非常强大，几行代码就可以做到非常不错的移动效果，下面我们来看一下css怎么移动图片，下面我们以图片沿x轴移动为例来看一下css移动图片的方法。

下面我们来看一下css设置鼠标放到图片上时图片移动效果：

img{width:200px;

height:200px;}

.stage{

width:200px;

height:200px;

border:1px solid red;

margin:100px auto;

perspective:1000px;

perspective-origin:50% 50%;

}

.con{

width:200px;

height:200px;

transform-style:preserve-3d;

transition:1s linear;

}

.stage:hover .con{

transform:translatex(150px);

}

效果图：

css使用:hover伪类在图片上设置transform:translatex(x);样式，使鼠标移动到图片上时图片移动。transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform属性：

语法：transform: none|transform-functions;