个人博客 http://www.sharedblog.cn/?post=69
CSS代码
<style type="text/css">
div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
margin:0;
padding:0;
}
body,html{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.box{
width: 200px;
height: 200px;
/*background: red;*/
position: relative;
transform: rotateX(-30deg) rotateY(30deg);
transform-style: preserve-3d;
animation: xuanzhuan 5s infinite linear;
}
@keyframes xuanzhuan{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.box:hover{
animation: xuanzhuan 5s infinite paused;
}
.box a{
display: block;
opacity: .7;
position: absolute;
left: 0;
top: 0;
border: 1px solid #fff;
}
.box_a{
width: 200px;
height: 200px;
background: black;
transition: all 3s;
}
.box_b{
width: 100px;
height: 100px;
background: #89fc6b;
margin: 50px;
}
.box .box_a:nth-child(1){
transform: translateZ(100px);
}
.box .box_a:nth-child(2){
transform: rotateY(180deg) translateZ(100px);
}
.box .box_a:nth-child(3){
transform: rotateY(-90deg) translateZ(100px);
}
.box .box_a:nth-child(4){
transform: rotateY(90deg) translateZ(100px);
}
.box .box_a:nth-child(5){
transform: rotateX(90deg) translateZ(100px);
}
.box .box_a:nth-child(6){
transform: rotateX(-90deg) translateZ(100px);
}
.box .box_b:nth-child(7){
transform: translateZ(50px);
}
.box .box_b:nth-child(8){
transform: rotateY(180deg) translateZ(50px);
}
.box .box_b:nth-child(9){
transform: rotateY(-90deg) translateZ(50px);
}
.box .box_b:nth-child(10){
transform: rotateY(90deg) translateZ(50px);
}
.box .box_b:nth-child(11){
transform: rotateX(90deg) translateZ(50px);
}
.box .box_b:nth-child(12){
transform: rotateX(-90deg) translateZ(50px);
}
.box:hover .box_a:nth-child(1){
transform: translateZ(150px);
}
.box:hover .box_a:nth-child(2){
transform: rotateY(180deg) translateZ(150px);
}
.box:hover .box_a:nth-child(3){
transform: rotateY(-90deg) translateZ(150px);
}
.box:hover .box_a:nth-child(4){
transform: rotateY(90deg) translateZ(150px);
}
.box:hover .box_a:nth-child(5){
transform: rotateX(90deg) translateZ(150px);
}
.box:hover .box_a:nth-child(6){
transform: rotateX(-90deg) translateZ(150px);
}
</style>
HTML代码
<body>
<div class="box">
<a href="#" class="box_a"><img src="http://www.sharedblog.cn/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
<a href="#" class="box_a"><img src="http://www.sharedblog.cn/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
<a href="#" class="box_a"><img src="http://www.sharedblog.cn/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
<a href="#" class="box_a"><img src="http://www.sharedblog.cn/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
<a href="#" class="box_a"><img src="http://www.sharedblog.cn/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
<a href="#" class="box_a"><img src="http://www.sharedblog.cn/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
<a href="#" class="box_b"></a>
<a href="#" class="box_b"></a>
<a href="#" class="box_b"></a>
<a href="#" class="box_b"></a>
<a href="#" class="box_b"></a>
<a href="#" class="box_b"></a>
</div>
</body>