我正在尝试制作我在网站上看到的效果。你可以看看这个网站： http ://www.ultranoir.com/fr/#!/blog/accueil/
或者你可以看到这个截图：
如果你在一个 div 上，你会看到一种 3D 效果。首先，我不知道如何称呼这种效果。这是一种翻译。
也许有更好的名字？
我想做这样的事情。
我分析了源代码，发现该网站正在使用背景图片：
http://www.ultranoir.com/cdn/gene/image/common/blog/grid_item_m.gif
你可以看到图片：
所以，这就是我所做的，但它并不完美。你可以看到这个小提琴。随意编辑小提琴。
你能帮助做得更好吗？
我想我不需要使用背景图片，它可以只用 css http://jsfiddle.net/Vinyl/BrzuV/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var $bt_bienvenue = $("#bt_bienvenue");
var $bt_bienvenue2 = $("#bt_bienvenue2");
$bt_bienvenue.hover(
function () {
$bt_bienvenue.transition({ x: '-10px', y: '-10px' });
$bt_bienvenue2.fadeIn(1000);
},
function () {
$bt_bienvenue.transition({ x: '0px', y: '0px' });
$bt_bienvenue2.fadeOut(100);
}
);
});
</script>
<style>
#test {
width:500px;
height:150px;
background-color:#000;
}
#container {
padding:30px;
font-family:Helvetica, Arial, sans-serif;
color:#FFFFFF;
}
#bt_bienvenue {
background-color:#e5322c;
width:95px;
height:190px;
z-index:3;
position:absolute;
cursor:pointer;
/*display:none;*/
}
#bt_bienvenue2 {
background:url(img/site/bgd-bienvenue.gif) 0 0 no-repeat;
/*float:left;*/
width:105px;
height:200px;
position:relative;
top:-10px;
left:-10px;
z-index:2;
display:none;
}
</style>
</head>
<body>
<!--<div id="test"></div>-->
<div id="container">
<div id="bt_bienvenue">Menu</div>
<div id="bt_bienvenue2"></div>
</div>
</body>
</html>