HTML5+CSS3实例分享：3D立体旋转相册

handsomesusu

已于 2022-02-05 14:49:14 修改

阅读量693

点赞数

分类专栏： HTML5+CSS3 文章标签： css3 html5 3d

于 2022-01-26 01:02:06 首次发布

本文链接：https://blog.csdn.net/weixin_45784168/article/details/122690894

版权

HTML5+CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5+CSS3实例分享：3D立体旋转相册

立方体可以自动旋转，鼠标移入时，会显现内层小立方体

效果展示

详细代码

// 3D立体旋转相册.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D立体旋转相册</title>
    <link rel="stylesheet" href="3D立体旋转相册.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="out-div out-front">
                <img src="../images/1.jpg" alt="">
            </div>
            <div class="out-div out-back">
                <img src="../images/2.jpg" alt="">
            </div>
            <div class="out-div out-left">
                <img src="../images/3.jpg" alt="">
            </div>
            <div class="out-div out-right">
                <img src="../images/4.jpg" alt="">
            </div>
            <div class="out-div out-top">
                <img src="../images/5.jpg" alt="">
            </div>
            <div class="out-div out-bottom">
                <img src="../images/6.jpg" alt="">
            </div>

            <div class="in-div in-front">
                <img src="../images/3.jpg" alt="">
            </div>
            <div class="in-div in-back">
                <img src="../images/4.jpg" alt="">
            </div>
            <div class="in-div in-left">
                <img src="../images/5.jpg" alt="">
            </div>
            <div class="in-div in-right">
                <img src="../images/6.jpg" alt="">
            </div>
            <div class="in-div in-top">
                <img src="../images/7.jpg" alt="">
            </div>
            <div class="in-div in-bottom">
                <img src="../images/8.jpg" alt="">
            </div>
        </div>

    </div>

</body>
</html>

// 3D立体旋转相册.css
*{
    /*初始化*/
    margin: 0;
    padding: 0;
}
body{
    /*100%窗口高度*/
    height: 100vh;
    /*弹性布局 居中*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*径向渐变背景*/
    background: radial-gradient(circle at center,#333,#000);
}
/*最外层样式*/
.container{
    width: 500px;
    height: 500px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*外层div图片样式*/
.out-div img{
    width: 200px;
    height: 200px;
    /*对图片进行剪切 保留原始比例*/
    object-fit: cover;
}
/*内层div图片样式*/
.in-div img{
    width: 100px;
    height: 100px;
    /*对图片进行剪切 保留原始比例*/
    object-fit: cover;
}
/*盒子*/
.box{
    position: absolute;
    width: 200px;
    height: 200px;
    /*开启3D效果*/
    transform-style: preserve-3d;
    /*执行动画：动画名 时长 线性的 无限次播放*/
    animation: rotateAnimate 10s linear infinite;
}
/*外层div 统一的样式*/
.out-div{
    width: 200px;
    height: 200px;
    position: absolute;
    /*动画过渡*/
    transition: transform 1s ease-in;
}
/*外层div样式*/
.out-front{
    transform: translateZ(100px);
}
.out-back{
    transform: translateZ(-100px) rotateY(180deg);
}
.out-left{
    transform: translateX(-100px) rotateY(-90deg);
}
.out-right{
    transform: translateX(100px) rotateY(90deg);
}
.out-top{
    transform: translateY(-100px) rotateX(90deg);
}
.out-bottom{
    transform: translateY(100px) rotateX(-90deg);
}
/*鼠标移入，外层div各个面的样式变化*/
.container:hover .out-front{
    transform: translateZ(200px);
}
.container:hover .out-back{
    transform: translateZ(-200px) rotateY(180deg);
}
.container:hover .out-left{
    transform: translateX(-200px) rotateY(-90deg);
}
.container:hover .out-right{
    transform: translateX(200px) rotateY(90deg);
}
.container:hover .out-top{
    transform: translateY(-200px) rotateX(90deg);
}
.container:hover .out-bottom{
    transform: translateY(200px) rotateX(-90deg);
}
/*内层div 统一的样式*/
.in-div{
    margin-left: 50px;
    margin-top: 50px;
    width: 100px;
    height: 100px;
    position: absolute;
}
.in-front{
    transform: translateZ(50px);
}
.in-back{
    transform: translateZ(-50px) rotateY(180deg);
}
.in-left{
    transform: translateX(-50px) rotateY(-90deg);
}
.in-right{
    transform: translateX(50px) rotateY(90deg);
}
.in-top{
    transform: translateY(-50px) rotateX(90deg);
}
.in-bottom{
    transform: translateY(50px) rotateX(-90deg);
}

/*定义动画*/
@keyframes rotateAnimate {
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}