index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.iphone{
margin: 100px auto;
width: 260px;
height: 460px;
background: #000;
/*透明渐变高光*/
background: linear-gradient(56deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.1) 100%),url("img/phone.png") no-repeat;
border-radius: 30px;
border-top: 40px solid #000;
border-bottom: 40px solid #000;
/*设置固定盒子的大小*/
box-sizing: border-box;
/*固定背景图一样的大小*/
background-size: cover;
/*移动图片的位置*/
background-position: 50% 50%;
padding: 320px 20px 20px 60px;
transform:rotateX(55deg) rotateY(5deg) rotateZ(-20deg);
box-shadow: -25px 25px 28px #333 ,-15px 10px #555;
transition: all 1s;
}
.iphone:hover{
transform: rotateZ(0) rotateY(0) rotateX(0) scale(1.2);
box-shadow: -25px 25px 28px #333 ,-8px 2px #555;
background: linear-gradient(-56deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.1) 100%),url("img/4.jpg") no-repeat;
border-radius: 30px;
border-top: 40px solid #000;
border-bottom: 40px solid #000;
/*设置固定盒子的大小*/
box-sizing: border-box;
/*固定背景图一样的大小*/
background-size: cover;
/*移动图片的位置*/
background-position: 50% 50%;
}
</style>
</head>
<body>
<div class="iphone">You are clever girl</div>
</body>
</html>
运行结果: