3d灵动的book

css3-1.png

当鼠标移入图片的时候，图标缓缓向上升起，当鼠标移开的时候，图片缓缓落下
css

.container{
            width: 600px;
            height: 600px;
            margin: 50px auto;
            border: 1px silver solid;
            /*设置3D*/
            -webkit-perspective: 1200px;
            perspective: 1200px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .iphone{
            display: block;
            width:300px;
            height: 437px;
            margin:30px auto;
            background: url("img/hua1.jpg")no-repeat center;
            background-size: cover;
            box-shadow: -7px 10px 10px #333;
            transform: rotateX(60deg) rotateY(10deg) rotateZ(-7deg);
            -webkit-transform-origin: 50% 50% 100px;
            -moz-transform-origin: 50% 50% 100px;
            transform-origin:50% 50% 100px;
            transition: all 1s ease-out;
        }
        .iphone:hover{
            box-shadow: -100px 100px 10px #fff;
            transform: rotate3d(0,0,0,0deg) ;
        }

html

<div class="container">
    <a href="javascript:void (0)" class="iphone" ></a>
</div>