使用CSS3绘制一个简易的3D相册

最新推荐文章于 2024-04-28 15:06:30 发布

旗smile

最新推荐文章于 2024-04-28 15:06:30 发布

阅读量8.2k

点赞数 3

分类专栏： CSS 文章标签： css3 3d

本文链接：https://blog.csdn.net/u014346301/article/details/53447712

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用CSS3绘制一个简易的3D相册，先来看一下完成的静态效果图，：

点击查看完成效果

关于CSS3中的transform3D的属性已经在学习CSS3 3D转换，制作一个3D立方这篇文章中讲解了，接下来我们直接来说如何实现一个3D相册。

总体布局

<div class="container">
    <div class="box" id="box">
        <div class="img img1"></div>
        <div class="img img2"></div>
        <div class="img img3"></div>
        <div class="img img4"></div>
        <div class="img img5"></div>
        <div class="img img6"></div>
    </div>
</div>

样式说明

container是总体的容器，设置3D视图距离prespective。

.container{
    width:800px;
    height: 400px;
    margin:0 auto;
    perspective: 1000px;
}

接下来是防止图片的容器box,需要将transform-style属性设置为preserve-3d，设置子元素变换方式为3d变换，否则3d效果会不起作用，动画效果我们在最后设置，作用是让相册动起来。

.box{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation:animate 12s linear infinite;
    -o-animation:animate 12s linear infinite;
    animation:animate 12s linear infinite;
}

接下来设置所有图片的样式，因为这里设置的是所有的图片，所以不需要设置3d属性，3d属性需要在分别设置。

.img{
    position: absolute;
    width:300px;
    height: 200px;
    background: #8959a8;
    top: 100px;
    left:250px;
    box-shadow: inset 0 0 5px #bbbbbb;
}

现在所有的图片应该是叠加在一起的，我们看一下这个时候的效果：
叠加在一起的效果
看出来了，毛效果都没有，接下来设置单个图片的样式，这里设置的样式基本上都一样，只是背景图片和在Y轴的旋转角度不一样，我放了6张图片，所以每个旋转60度，如果放置的图片张数不一样那旋转的角度就不一样。

.img1{
    background: url("../img/1.jpg") no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    transform: rotateY(0deg);
}
/*****/
.img6{
    background: url("../img/6.jpg") no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    transform: rotateY(300deg);
}

这个时候应该是有效果了，我们来看一下：
在Y轴旋转的效果

这个时候效果已经出来了，只是照片都挤在一起了，这个时候我们可以将每个照片都向自己的z轴方向往前移一点，那照片就不会挤在一起了，我们可以修改代码，添加 translateZ(300px)：

.img1{
    background: url("../img/1.jpg") no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    transform: rotateY(0deg) translateZ(300px);
}
/*****/
.img6{
    background: url("../img/6.jpg") no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    transform: rotateY(300deg) translateZ(300px);
}

这样以后效果就可以了，我们来看一下：

ok，这个时候效果已经完成了，只要再加上动画就可以了：

@keyframes animate {
    0%{
        transform: rotateY(0deg);
    }
    100%{
         transform: rotateY(360deg);
    }
}

将动画添加到相册的容器上，

.box{
    animation:animate 12s linear infinite;
}

好啦，这样一个基本的3D相册就完成了。

下面是全部的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D相册</title>
    <style>
        .container{
            width:800px;
            height: 400px;
            margin:0 auto;
            perspective: 1000px;
        }
        .box{
            position: relative;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-animation:animate 12s linear infinite;
            -o-animation:animate 12s linear infinite;
            animation:animate 12s linear infinite;
        }
        .img{
            position: absolute;
            width:300px;
            height: 200px;
            background: #8959a8;
            top: 100px;
            left:250px;
            box-shadow: inset 0 0 5px #bbbbbb;
        }
        .img1{
            background: url("../img/1.jpg") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(0deg) translateZ(300px);
        }
        .img2{
            background: url("../img/2.jpg") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(60deg) translateZ(300px);
        }
        .img3{
            background: url("../img/3.jpg") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(120deg) translateZ(300px);
        }
        .img4{
            background: url("../img/4.jpg") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(180deg) translateZ(300px);
        }
        .img5{
            background: url("../img/5.jpg") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(240deg) translateZ(300px);
        }
        .img6{
            background: url("../img/6.jpg") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(300deg) translateZ(300px);
        }
        @keyframes animate {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box" id="box">
        <div class="img img1"></div>
        <div class="img img2"></div>
        <div class="img img3"></div>
        <div class="img img4"></div>
        <div class="img img5"></div>
        <div class="img img6"></div>
    </div>
</div>
</body>
</html>

旗smile

关注

3
点赞
踩
34

收藏

觉得还不错? 一键收藏
5
评论
使用CSS3绘制一个简易的3D相册

使用CSS3绘制一个简易的3D相册，先来看一下完成的静态效果图，：点击这里查看完成的效果关于CSS3中的transform3D的属性已经在学习CSS3 3D转换，制作一个3D立方体这篇文章中讲解了，接下来我们直接来说如何实现一个3D相册。总体布局<div class="container"> <div class="box" id="box"> <div class="i
复制链接

扫一扫