css3 3d透视效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
perspective:2000px;
}
.box img{
transition: all 1s;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-15deg);
box-shadow: -10px 10px 15px rgba(0,0,0,.5);
}
.box img:hover{
transform: translate(-50%, -50%) rotateX(0deg) rotateZ(0deg);
box-shadow: -200px -200px 15px rgba(0,0,0,0);
}
</style>
</head>
<body>
<div class="box">
<img src="image/iphone.jpg" alt="">
</div>
</body>
</html>