html图片平移效果,怎么用CSS移动图片？

css3功能非常强大，几行代码就可以做到非常不错的移动效果。下面本篇文章就来给大家介绍一下使用CSS实现移动图片效果的方法，希望对大家有所帮助。

在CSS中，可以利用transform属性，通过设置属性值translateX(x)、translateY(y)或translate(x,y)来移动图片，实现平移效果。

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法transform: none|transform-functions;

其中的三个属性值：translateX(x)：用于沿着x轴平移。

translateY(y)：用于沿着y轴平移。

translate(x,y)：用于沿着x和y轴平移。

示例：

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);样式，使鼠标移动到图片上时图片移动。

修改css为：.stage:hover .con {

transform: translatey(150px);

}

效果图：

修改CSS为：.stage:hover .con {

transform: translate(50px,50px);

}

效果图：

更多前端开发知识，请查阅 HTML中文网 ！！