圆月山庄资源网

使用CSS3实现一个3D相册效果实例
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

第一篇主要列出了一些常用或经典的CSS3技巧和方法；第二篇是一个用CSS3实现的立方体实例，详细讲解了3D旋转和transform等属性。

本文再来利用CSS3属性来编写一个实例，话不多说，先直接看看效果。

因为前面已经讲解过一些属性的用法，此篇文章不再赘述，只记录这个实例的编码过程。项目代码最最后。

布局

直接看html布局：

    <div class="my-container">  <!-- 大容器 -->
        <div class="photo-wrap">  <!-- 舞台 -->
            <div class="container">   <!-- 相册容器 -->
                <div class="img img01"></div>
                <div class="img img02"></div>
                <div class="img img03"></div>
                <div class="img img04"></div>
                <div class="img img05"></div>
                <div class="img img06"></div>
                <div class="img img07"></div>
                <div class="img img08"></div>
                <div class="img img09"></div>
            </div>
        </div>
    </div>

样式

大容器

最外层的大容器根据实际情况定义样式即可。

    .my-container {        
        width: 800px;
        height: 500px;
        margin: 20px auto;
    }

舞台元素

perspective属性用来激活一个3D空间，使其子元素都会获得透视效果（使用了3D变换的元素，此实例中也就是相册容器元素）。

    .photo-wrap {
        perspective: 800px;
        width: 800px;
    }

相册容器

相册容器的transform-style: preserve-3d;样式，表示所有子元素在3D空间中呈现。

    .container {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
    }

单个元素

    .img {
        width: 200px;
        height: 118px;
        line-height: 118px;
        text-align: center;
        position: absolute;
        top: 160px;
        left: 300px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
        background: pink;
    }

现在浏览器看看效果：

使用CSS3实现一个3D相册效果实例

右上图可以看出，现在每张图片都固定在同一个位置。很明显不是我们想要的效果。但是想要达到我们预期的效果，要怎么改变呢？

现在这些图片都在容器的最中心点以平面的形式展现的，要想形成一个圆形，就要用到旋转属性（因为要绕着Y轴旋转，所以是rotateY）了。

这里一共有9张图，所以按360/9=40度为单位来分别对每张图进行旋转。

    .img01 {
        transform: rotateY(0deg);
    }
    .img02 {
        transform: rotateY(40deg);
    }
    .img03 {
        transform: rotateY(80deg);
    }
    .img04 {
        transform: rotateY(120deg);
    }
    .img05 {
        transform: rotateY(160deg);
    }
    .img06 {
        transform: rotateY(200deg);
    }
    .img07 {
        transform: rotateY(240deg);
    }
    .img08 {
        transform: rotateY(280deg);
    }
    .img09 {
        transform: rotateY(320deg);
    }

增加旋转之后，再看看效果：

 

使用CSS3实现一个3D相册效果实例

我们发现这些图片不在一个平面了，但是都挤在了一起，我们试着把每张图片都向自己的前方(translateZ)移动300像素，看看会发生什么。

    .img01 {
        transform: rotateY(0deg) translateZ(300px);
    }
    .img02 {
        transform: rotateY(40deg) translateZ(300px);
    }
    .img03 {
        transform: rotateY(80deg) translateZ(300px);
    }
    .img04 {
        transform: rotateY(120deg) translateZ(300px);
    }
    .img05 {
        transform: rotateY(160deg) translateZ(300px);
    }
    .img06 {
        transform: rotateY(200deg) translateZ(300px);
    }
    .img07 {
        transform: rotateY(240deg) translateZ(300px);
    }
    .img08 {
        transform: rotateY(280deg) translateZ(300px);
    }
    .img09 {
        transform: rotateY(320deg) translateZ(300px);
    }

 增加旋转和移动之后的效果：

使用CSS3实现一个3D相册效果实例

 至此，就已经达到我们预期的效果了。把每个图片标签加上喜欢的照片，就OK啦！

动画

想要让这个相册动起来，加一个动画就好了。

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

然后给"相册容器"container元素添加动画属性：

 animation: rotateY360 15s ease-in-out infinite;

最终，大功告成:

使用CSS3实现一个3D相册效果实例

源码下载地址：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
css3,3d相册,css3,相册墙,动态效果, css3,3d立体图片相册
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接