CSS3制作3D旋转相册

居然鼬个高手

已于 2022-05-25 13:23:38 修改

阅读量253

点赞数

分类专栏： CSS3

于 2022-05-22 14:17:37 首次发布

本文链接：https://blog.csdn.net/NY1007/article/details/124910203

版权

3D旋转相册效果 CSS动画 HTML布局 JavaScript交互

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

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转相册</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="header">
        <ul class="minbox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol class="maxbox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

body {
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    position: relative;
    perspective: 1000px;
    background: url(../img/preview.png) no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.header {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    /* background-color: blue; */
    transform-style: preserve-3d;
    transform: rotateX(13deg);
}

.minbox {
    position: absolute;
    top: 200px;
    left: 50px;
    /* background-color: red; */
    transform-style: preserve-3d;
    animation: min 5s linear infinite;
}

.minbox li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    /* background-color: red; */
}

.minbox li:nth-child(1) {
    background: url(../img/01.png) no-repeat 0 0;
    transform: rotateY(0deg) translateZ(50px);
}

.minbox li:nth-child(2) {
    background: url(../img/02.png) no-repeat 0 0;
    transform: rotateY(90deg) translateZ(50px);
}

.minbox li:nth-child(3) {
    background: url(../img/03.png) no-repeat 0 0;
    transform: rotateY(-90deg) translateZ(50px);
}

.minbox li:nth-child(4) {
    background: url(../img/04.png) no-repeat 0 0;
    transform: rotateX(90deg) translateZ(50px);
}

.minbox li:nth-child(5) {
    background: url(../img/05.png) no-repeat 0 0;
    transform: rotateX(-90deg) translateZ(50px);
}

.minbox li:nth-child(6) {
    background: url(../img/06.png) no-repeat 0 0;
    transform: rotateY(180deg) translateZ(50px);
}

@keyframes min {
    0% {
        transform: translate(0) rotateY(0deg);
    }
    100% {
        transform: translate(0) rotate3d(1, 1, 0, 360deg);
    }
}

.maxbox {
    position: absolute;
    top: 150px;
    left: 0px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: max 5s linear infinite;
}

.maxbox li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    opacity: 0.4;
    transition: all 1s;
    /* background-color: red; */
}

.maxbox li:nth-child(1) {
    background: url(../img/1.png) no-repeat -70px 0;
    transform: rotateY(0deg) translateZ(100px);
}

.maxbox li:nth-child(2) {
    background: url(../img/2.png) no-repeat -100px -100px;
    transform: rotateY(90deg) translateZ(100px);
}

.maxbox li:nth-child(3) {
    background: url(../img/3.png) no-repeat -120px -30px;
    transform: rotateY(-90deg) translateZ(100px);
}

.maxbox li:nth-child(4) {
    background: url(../img/4.png) no-repeat -70px 0px;
    transform: rotateX(90deg) translateZ(100px);
}

.maxbox li:nth-child(5) {
    background: url(../img/5.png) no-repeat -70px 0;
    transform: rotateX(-90deg) translateZ(100px);
}

.maxbox li:nth-child(6) {
    background: url(../img/6.png) no-repeat -70px 0;
    transform: rotateY(180deg) translateZ(100px);
}

@keyframes max {
    0% {
        transform: translate(0) rotateY(0deg);
    }
    100% {
        transform: translate(0) rotate3d(1, 1, 0, 360deg);
    }
}

.header:hover ol li:nth-child(1) {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -70px;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(250px);
}

.header:hover ol li:nth-child(2) {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -70px;
    opacity: 0.7;
    transform: rotateY(90deg) translateZ(250px);
}

.header:hover ol li:nth-child(3) {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -70px;
    opacity: 0.7;
    transform: rotateY(-90deg) translateZ(250px);
}

.header:hover ol li:nth-child(4) {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -70px;
    opacity: 0.7;
    transform: rotateX(90deg) translateZ(250px);
}

.header:hover ol li:nth-child(5) {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -70px;
    opacity: 0.7;
    transform: rotateX(-90deg) translateZ(250px);
}

.header:hover ol li:nth-child(6) {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -70px;
    opacity: 0.7;
    transform: rotateY(180deg) translateZ(250px);
}

3dPhoto