文章图片
css3-1.png
【3d灵动的book】当鼠标移入图片的时候，图标缓缓向上升起，当鼠标移开的时候，图片缓缓落下
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
