<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cube{
/* 固定定位盒子包含框 */
position: fixed;
left: 50%;
top:12px;
}
.cube.one{
top:200px;
left:50%;
margin-left:-200px;
}
.cube img{
/* 定义礼盒三面的贴图大小 */
180px;
height:180px;
}
.rightFace,.leftFace,.topFace{
position:absolute;
}
.leftFace {
/* 左侧面Y轴倾斜30度 */
-webkit-transform:skew(0deg, 30deg);
background:#ccc;
}
.rightFace{
-webkit-transform:skew(0deg,-30deg);
background:#ddd;
left: 180px;
top:0;
}
.topFace{
-webkit-transform:rotate(60deg) skew(0deg,-30deg) scale(1,1.16);
top:-142px;
left:89px;
}
.cube{-webkit-transition:-webkit-transform 1s linear;}
.cube:hover{ -webkit-transform:translate(202px,115px); }
</style>
</head>
<body>
<div class="cube one">
<div class="topFace">
<div>
<img src="img/cat1.jpg" alt="">
</div>
</div>
<div class="leftFace">
<img src="img/cat2.jpg" alt="">
</div>
<div class="rightFace">
<img src="img/cat3.jpg" alt="">
</div>
</div>
</body>
</html>