重在理解!!!
个人感觉不难,貌似需要一点点空间思维
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
border: 5px solid #ccc;
border-radius: 10px;
/*box-sizing:border-box;*/
position: absolute;
}
.big{
width: 400px;
height: 335px;
position: relative;
margin: 400px auto;
transform: rotateX(30deg) rotateY(-20deg);
transform-style: preserve-3d;
transition: transform 1s;
border: none;
}
img{
transition: transform 1s;
}
div:nth-child(2){
transform: translateZ(450px);
}
div:nth-child(3){
transform: translateZ(-450px);
}
div:nth-child(4){
transform: rotateY(-60deg) translateZ(-450px);
}
div:nth-child(5){
transform: rotateY(-60deg) translateZ(450px);
}
div:nth-child(6){
transform: rotateY(-120deg) translateZ(450px);
}
.div1{
transform: rotateY(-120deg) translateZ(-450px);
}
/*.div1:hover{*/
/*transform: scale(1.5);*/
/*}*/
/*.div2:hover{*/
/*transform: scale(1.5);*/
/*}*/
img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="big">
<div class="div1"><img src="img/1.jpg" height="300" width="300"/></div>
<div class="div2"><img src="img/2.jpg" height="300" width="300"/></div>
<div class="div2"><img src="img/3.jpg" height="300" width="300"/></div>
<div class="div2"><img src="img/4.jpg" height="300" width="300"/></div>
<div class="div2"><img src="img/5.jpg" height="300" width="300"/></div>
<div class="div2"><img src="img/6.jpg" height="300" width="300"/></div>
</div>
</body>
</html>
效果图如下
告辞!