css3特效3D箱子相册

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
        
    <div class="box">
        <div class="box1"><img src="img/timg7.jpg" alt=""></div>
        <div class="box2"><img src="img/timg8.jpg" alt=""></div>
        <div class="box3"><img src="img/timg9.jpg" alt=""></div>
        <div class="box4"><img src="img/timg10.jpg" alt=""></div>
        <div class="box5"><img src="img/timg11.jpg" alt=""></div>
        <div class="box6"><img src="img/timg12.jpg" alt=""></div>

        <div class="test1"><img src="img/timg1.gif" alt=""></div>
        <div class="test2"><img src="img/timg2.gif" alt=""></div>
        <div class="test3"><img src="img/timg3.gif" alt=""></div>
        <div class="test4"><img src="img/timg4.gif" alt=""></div>
        <div class="test5"><img src="img/timg5.gif" alt=""></div>
        <div class="test6"><img src="img/timg6.gif" alt=""></div>
    </div>
</body>
</html>

index.css

body,html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    /*透视*/
    perspective: 800px;

}
.box{
    position: relative;
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(-25deg) rotateZ(0deg);
    animation: move 5s linear 0s infinite;
}
.box>div{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 1s;
}
.box img{
    width: 100%;
    height: 100%;
    opacity: 0.5;
}
.box1{
    background: rgba(255, 0, 0, 0.5);
    transform: translateZ(60px);
}
.box:hover > .box1{
    transform: translateZ(100px);
}
.test1{
    width: 300px !important;
    height: 300px !important;
    background: rgba(0, 0, 0, 0.5);
    transform: translateZ(150px) translateX(-95px) translateY(-95px);
}
.box:hover > .test1{
    transform: translateZ(250px) translateX(-95px) translateY(-95px);
}

.box2{
    background: rgba(0, 255, 0, 0.5);
    transform: translateZ(-60px) ;
}
.box:hover > .box2{
    transform: translateZ(-100px);
}
.test2{
    width: 300px !important;
    height: 300px !important;
    background: rgba(0, 0, 0, 0.5);
    transform: translateZ(-150px) translateX(-95px) translateY(-95px);
}
.box:hover > .test2{
    transform: translateZ(-250px) translateX(-95px) translateY(-95px);
}

.box3{
    background: rgba(0, 0, 255, 0.5);
    transform: translateX(60px) rotateY(90deg);
}
.box:hover > .box3{
    transform: translateX(100px) rotateY(90deg);
}
.test3{
    width: 300px !important;
    height: 300px !important;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(150px) rotateY(90deg) translateZ(-95px) translateY(-95px);
}
.box:hover > .test3{
    transform: translateX(250px) rotateY(90deg) translateZ(-95px) translateY(-95px);
}


.box4{
    background: rgba(30, 100, 130, 0.5);
    transform: translateX(-60px) rotateY(90deg);
}
.box:hover > .box4{
    transform: translateX(-100px) rotateY(90deg);
}
.test4{
    width: 300px !important;
    height: 300px !important;
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(-150px) rotateY(90deg) translateZ(-95px) translateY(-95px);
}
.box:hover > .test4{
    transform: translateX(-250px) rotateY(90deg) translateZ(-95px) translateY(-95px);
}

.box5{
    background: rgba(150, 200, 130, 0.5);
    transform: translateY(-60px) rotateX(90deg);
}
.box:hover > .box5{
    transform: translateY(-100px) rotateX(90deg);
}
.test5{
    width: 300px !important;
    height: 300px !important;
    background:rgba(0, 0, 0, 0.5);
    transform: translateY(-150px) rotateX(90deg) translateZ(95px) translateX(-95px);
}
.box:hover > .test5{
    transform: translateY(-250px) rotateX(90deg) translateZ(95px) translateX(-95px);
}

.box6{
    background: rgba(240, 23, 130, 0.5);
    transform: translateY(60px) rotateX(90deg);
}
.box:hover > .box6{
    transform: translateY(100px) rotateX(90deg);
}
.test6{
    width: 300px !important;
    height: 300px !important;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(150px) rotateX(90deg) translateZ(95px) translateX(-95px);
}
.box:hover > .test6{
    transform: translateY(250px) rotateX(90deg) translateZ(95px) translateX(-95px);
}
@keyframes move{
    form {transform: rotateX(-25deg) rotateY(-25deg) rotateZ(0deg);}
    to   {transform: rotateX(-385deg) rotateY(-385deg) rotateZ(-360deg);}
}

效果图：

带图片：

资源以上传下载即可用：
3D小盒子相册点击下载

一眼泥沙

发布了21 篇原创文章 · 获赞 2 · 访问量 6483

私信关注

css3特效3D箱子相册

猜你喜欢