3D旋转相册html+css代码分享

京都小白

已于 2023-01-27 01:24:21 修改

阅读量8.9k

点赞数 37

分类专栏：前端

于 2022-04-16 14:53:06 首次发布

本文链接：https://blog.csdn.net/m0_53602804/article/details/124213634

版权

HTML CSS 3D旋转相册特效前端开发

关键词由CSDN通过智能技术生成

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3D旋转相册html+css代码分享

首先看效果：

在这里插入图片描述
html代码：

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>3d旋转相册</title>
        <link rel="stylesheet" href="demo.css">
    </head>
    <body>
        <!--准备一个包裹器-->
        <div id="wrap">
        <!--将立方体包裹在其中-->
        <span id="in-front"><img src="img/1.jpg"></span>
        <span id="in-left"><img src="img/2.jpg"></span>
        <span id="in-right"><img src="img/3.jpg"></span>
        <span id="in-back"><img src="img/4.jpg"></span>
        <span id="in-top"><img src="img/5.jpg"></span>
        <span id="in-bottom"><img src="img/6.jpg"></span>
        <!--第三步组装外部的立方体-->
        <div id="out-front"><img src="img/7.jpg"></div>
        <div id="out-left"><img src="img/8.jpg"></div>
        <div id="out-right"><img src="img/9.jpg"></div>
        <div id="out-back"><img src="img/10.jpg"></div>
        <div id="out-top"><img src="img/11.jpg"></div>
        <div id="out-bottom"><img src="img/12.jpg"></div>
        </div>
    </body>
</html>

CSS代码：

body{
    background: url("img/13.jpg") no-repeat center center fixed;
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;
}
#wrap span{
    display: block;
    width:100px;
    height:100px;
    background-color: rgb(10, 118, 212);
    position: absolute;
    top:50px;
    left:50px;
}

#wrap{
    width: 100px;
    height:100px;
    margin:300px auto;
    animation: rotate 20s infinite;
    transform-style:preserve-3d ;
}

#wrap span img{
    width:100px;
    height:100px;
}

#in-front{
    transform: translateZ(50px);
}

#in-back{
    transform: translateZ(-50px);
}

#in-left{
    transform: rotateY(90deg)  translateZ(50px);
}

#in-right{
    transform:  rotateY(-90deg) translateZ(50px);
}

#in-top{
    transform:   rotateX(90deg) translateZ(50px);
}

#in-bottom{
    transform:  rotateX(-90deg) translateZ(50px);
}

@keyframes rotate{
    from{
        transform: rotateX(0deg)  rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

#wrap div{
    width:200px;
    height:200px;
    background-color: brown;
    position: absolute;
}
#wrap div img{
    width:200px;
    height:200px;
}

#out-front{
    transform: translateZ(100px);
}

#out-back{
    transform: translateZ(-100px);
}

#out-left{
    transform: rotateY(90deg)  translateZ(100px);
}

#out-right{
    transform:  rotateY(-90deg) translateZ(100px);
}

#out-top{
    transform:   rotateX(90deg) translateZ(100px);
}

#out-bottom{
    transform:  rotateX(-90deg) translateZ(100px);
}

#wrap:hover #out-front{
    transform: translateZ(150px);
}

#wrap:hover #out-left{
    transform: rotateY(90deg)  translateZ(150px);
}

#wrap:hover #out-right{
    transform:  rotateY(-90deg) translateZ(150px);
}

#wrap:hover #out-back{
    transform: translateZ(-150px);
}

#wrap:hover #out-top{
    transform:   rotateX(90deg) translateZ(150px);
}
#wrap:hover #out-bottom{
    transform:  rotateX(-90deg) translateZ(150px);
}