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


Posted in HTML / CSS onDecember 03, 2016

第一篇主要列出了一些常用或经典的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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 #HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 #HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 #HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 #HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 #HTML / CSS
CSS3 box-sizing属性详解
Nov 15 #HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
javascript编写简易计算器
2017/05/06 Javascript
vue二级路由设置方法
2018/02/09 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
python字符串连接方式汇总
2014/08/21 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
社区服务活动总结
2014/05/07 职场文书
绿色环保演讲稿
2014/05/10 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
入党转正介绍人意见
2015/06/03 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
python中的None与NULL用法说明
2021/05/25 Python