css 3ピクチャサスペンション効果
14795 ワード
純css実装
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
*
{
padding:0px; margin:0
}
ul
{
-webkit-perspective:1200; /* perspective 3D */width:800px; margin:0 auto;
}
li
{
width: 225px;
height: 210px; display:block;
list-style:none; padding:0px; margin:0;
}
div
{
width:225px; height:210px; margin:0 auto; position:absolute; top:1px;
background:url(Images/tout-shadow1.png) no-repeat; /* */
-webkit-transform-origin:0 0;
-webkit-transform:scaleY(0.95); /* */
-webkit-transition:-webkit-transform .4s ease;
}
img
{
width:225px; height:210px;
position:absolute; top:0px;
display:block;
-webkit-transform-origin-x:0px;
-webkit-transform-origin-y:0px;
-webkit-transform-origin-z:0px;
-webkit-transition:-webkit-transform .3s ease;
-webkit-transform-style:preserve-3d;
}
li:hover
{
-webkit-background-size:225px 220px;
}
li:hover img
{
-webkit-transform:rotateX(10deg);
}
li:hover div
{
-webkit-transform:scaleY(1.02);
}
</style>
</head>
<body>
<ul>
<li>
<div></div>
<img src="Images/tout-secrets.png" /></li>
</ul>
</body>
</html>