css 3ピクチャサスペンション効果

14795 ワード

css3 图片 悬停效果
純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>