前端项目练习之3D相册

2020-07-12 本文已影响0人简单一点点

用CSS实现一个抖音上很火的3D相册，首先看下效果图。

3D相册.gif

首先创建index.html文件，其中主要包含2个列表，用来表示放图片的正方体。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset='UTF-8'>
        <title>CSS实现3D相册特效</title>
        <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head>
    <body>
        <div class="box">
            <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>

接下来是主要部分css文件。

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

body {
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    background-size: cover; /* 按照等比缩放铺满整个区域 */
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

li {
    list-style: none;
}

.box {
    width: 200px;
    height: 200px;
    background-size: cover;
    position: absolute;
    margin-left: 42%;
    margin-top: 22%;
    transform-style: preserve-3d;
    transform: rotateX(13deg);
    animation: move 5s linear infinite;
}

.minbox {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 30px;
    -transform-style: preserve-3d;
}

.minbox li {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

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

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

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

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

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

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

.maxbox {
    width: 800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    transform-style: preserve-3d;
}

.maxbox li {
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
    transition: all 1s ease;
}

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

.maxbox li:nth-child(2) {
    background: url(img/12.jpg) no-repeat 0 0;
    transform: rotateX(180deg) translateZ(100px);
}

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

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

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

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

.box:hover ol li:nth-child(1) {
    transform:translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(2) {
    transform:rotateX(180deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(3) {
    transform:rotateX(-90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(4) {
    transform:rotateX(90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

.box:hover ol li:nth-child(5) {
    transform:rotateY(-90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}

@keyframes move {
    0% {
        transform: rotateX(13deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(13deg) rotateY(360deg);
    }
}

对其中的一些关键样式进行学习：

transform 属性实现元素转换，允许元素进行旋转、缩放、移动和倾斜。

transform--style属性指定嵌套元素是怎样在三维空间中呈现。可选择的值包括flat（2D平面）和preserve-3d（3D平面）。

animation属性包括6个动画属性，分别是

值	描述
animation-name	规定要绑定到选择器的keyframe名称
animation-duration	完成动画花费时间
animation-timing-funciton	动画的速度曲线
animation-delay	动画开始之前的延迟
animation-iteration-count	动画应该播放的次数
animation-direction	是否轮流反向播放动画

其中keyframes定义在了文件最后，用来创建动画，0％是开头动画，100％是当动画完成。

然后就是需要定义每一面的图片，注意小图是100px×100px，大图是400px×400px，其中第二张图是头朝下的。

前端项目练习之3D相册

猜你喜欢

热点阅读