怎样用纯CSS给图片加一个鼠标经过位移的效果

怎样用纯CSS给图片加一个鼠标经过位移的效果超级紧急，希望各位大神给我答案，小弟在这里谢过了... 怎样用纯CSS给图片加一个鼠标经过位移的效果超级紧急，希望各位大神给我答案，小弟在这里谢过了展开

 我来答

3个回答

#热议# 生活中有哪些实用的心理学知识？

百度网友3cb80af
2017-06-15 · TA获得超过9535个赞

知道大有可为答主

回答量：1.2万

采纳率：83%

帮助的人：4020万

我也去答题访问个人页

关注

展开全部

如果你想只向一移的话，你需要修改translate

-webkit-transform:translateY(100px);
-moz-transform:translateY(100px);

这样才是向下移动100px，

因为translate
默认是移动XY轴的，意思就是说，移动左右以及上下一起，但是默认平移而已，

如果你想单独操作Y的话，就要translateY，单独操作X用translateX，当然默认translate
(100px)相当于translateX(100px)

如果你想向右移的同时又向下移

-webkit-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);

这样你应该能理解translate的用法了。。。

已赞过 已踩过<

评论收起

淘宝热卖

广告2025-01-09

海量商品尽收眼底，只有你想不到的，没有淘宝找不到的。加入百万用户的行列，让淘宝为您打开一片全新购物天地。

simba.taobao.com

jack观天下
2017-06-09 · 带你看天下趣闻，有意思的视频！

jack观天下

采纳数：832 获赞数：3143

向TA提问私信TA

关注

展开全部

translate(x,y)

已赞过 已踩过<

评论收起

匿名用户
2017-06-09

展开全部

位移具体指什么，什么意思？

追问

图片经过往下平滑过渡，做一个效果

追答

<!DOCTYPE HTML>							
<html>							
	<head>							
		<meta charset="utf-8">							
		<title>实例
		</title>												
	</head>							
	<body>							
		<style type="text/css">.demo_box{
			border:1px solid #3DA5DC;
			background:#a4dcf9;
			height:100px;
			width:200px;
			text-align:center;
			color:#fff;
			}
			.translate_1{
				-webkit-transition:1s ease all;
				-moz-transition:1s ease all;
				position:absolute;
				left:250px;
				top:10px;
				background:#4d6ea6;
			}
			.translate_1:hover{
				-webkit-transform:translate(0px,100px);
				-moz-transform:translate(100px);
			}
			.translate_2{
				-webkit-transition:1s ease all;
				-moz-transition:1s ease all;
				position:absolute;
				left:250px;
				top:150px;
				background:#b9f9cb;
				color:#000;
			}
			.translate_2:hover{
				-webkit-transform:translate(-100px);
				-moz-transform:translate(-100px);
			}
		</style>
		<div class="demo_box translate_1">鼠标经过向下移动100像素
		</div>
		<div class="demo_box translate_2">鼠标经过向相反方向移动100像素
		</div>                       
	</body>				        
</html>