<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
//给每一张图片的父级盒子定位
.son{
position:absolute;
}
//给图片设置宽高,并设置过渡效果
.son img{
width: 230px;
height: 230px;
transition:all .25s ;
}
//使子级元素保持3d效果,并且保持3d元素的透明效果
.father{
width:400px;
height: 400px;
margin-top: 200px;
margin-left: 400px;
perspective:3000px;
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
transform-style: preserve-3d;
}
//给每一个图片设置旋转角度,并且调整位置达到六边体的效果
.son:first-of-type{
-webkit-transform: rotateY(0deg) translateZ(200px);
-moz-transform: rotateY(0deg) translateZ(200px);
-ms-transform: rotateY(0deg) translateZ(200px);
-o-transform: rotateY(0deg) translateZ(200px);
transform: rotateY(0deg) translateZ(200px);
}
.son:nth-of-type(2){
-webkit-transform: rotateY(60deg) translateZ(200px);
-moz-transform: rotateY(60deg) translateZ(200px);
-ms-transform: rotateY(60deg) translateZ(200px);
-o-transform: rotateY(60deg) translateZ(200px);
transform: rotateY(60deg) translateZ(200px);
}
.son:nth-of-type(3){
-webkit-transform: rotateY(120deg) translateZ(200px);
-moz-transform: rotateY(120deg) translateZ(200px);
-ms-transform: rotateY(120deg) translateZ(200px);
-o-transform: rotateY(120deg) translateZ(200px);
transform: rotateY(120deg) translateZ(200px);
}
.son:nth-of-type(4){
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-ms-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
.son:nth-of-type(5){
-webkit-transform: rotateY(240deg) translateZ(200px);
-moz-transform: rotateY(240deg) translateZ(200px);
-ms-transform: rotateY(240deg) translateZ(200px);
-o-transform: rotateY(240deg) translateZ(200px);
transform: rotateY(240deg) translateZ(200px);
}
.son:nth-of-type(6){
-webkit-transform: rotateY(300deg) translateZ(200px);
-moz-transform: rotateY(300deg) translateZ(200px);
-ms-transform: rotateY(300deg) translateZ(200px);
-o-transform: rotateY(300deg) translateZ(200px);
transform: rotateY(300deg) translateZ(200px);
}
img:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="father">
<div class="son"><img src="img/1.jpg" alt="" class="sss" /></div>
<div class="son"><img src="img/2.jpg" alt="" class="sss" /></div>
<div class="son"><img src="img/3.jpg" alt="" class="sss" /></div>
<div class="son"><img src="img/4.jpg" alt="" class="sss" /></div>
<div class="son"><img src="img/5.jpg" alt="" class="sss" /></div>
<div class="son"><img src="img/6.jpg" alt="" class="sss" /></div>
</div>
</body>
</html>