使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此
第一篇主要列出了一些常用或经典的CSS3技巧和方法;第二篇是一个用CSS3实现的立方体实例,详细讲解了3D旋转和transform等属性。
本文再来利用CSS3属性来编写一个实例,话不多说,先直接看看效果。3D相册实例DEMO
因为前面已经讲解过一些属性的用法,此篇文章不再赘述,只记录这个实例的编码过程。项目代码已上传至github,项目代码github地址
布局
直接看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;
}
现在浏览器看看效果:
右上图可以看出,现在每张图片都固定在同一个位置。很明显不是我们想要的效果。但是想要达到我们预期的效果,要怎么改变呢?
现在这些图片都在容器的最中心点以平面的形式展现的,要想形成一个圆形,就要用到旋转属性(因为要绕着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);
}
增加旋转之后,再看看效果:
我们发现这些图片不在一个平面了,但是都挤在了一起,我们试着把每张图片都向自己的前方(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);
}
增加旋转和移动之后的效果:
至此,就已经达到我们预期的效果了。把每个图片标签加上喜欢的照片,就OK啦!
动画
想要让这个相册动起来,加一个动画就好了。
@keyframes rotateY360 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
然后给"相册容器"container元素添加动画属性:
animation: rotateY360 15s ease-in-out infinite;
最终,大功告成:
代码已经上传至github。项目代码github地址,喜欢的童鞋们不妨点个star呀!谢谢~
使用CSS3实现一个3D相册的更多相关文章
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- Android 一个3D相册源码
我们专业课有Android的学习,最后老师让做一个简单的Android应用程序.我在网上找些资料,加上自己改造一下做了一个3D相册. 程序仿照Android的相册功能,调用Gallery类对相片进行浏 ...
- 使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...
- 使用Jquery.js框架和CSS3实现3D相册的制作
有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 基于CSS3和jQuery实现的3D相册
天我们再来看一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧. 在线预览 源码下载 实现的代码: <div c ...
- 七夕节表白3d相册制作(html5+css3)
七夕节表白3d相册制作 涉及知识点 定位 阴影 3d转换 动画 主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...
- 程序员用HTML5给女朋友制作的3D相册
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...
- CSS3系列之3D制作
一.序 博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时 ...
随机推荐
- C++对C的函数拓展
一,内联函数 1.内联函数的概念 C++中的const常量可以用来代替宏常数的定义,例如:用const int a = 10来替换# define a 10.那么C++中是否有什么解决方案来替代宏代码 ...
- 深入理解DIP、IoC、DI以及IoC容器
摘要 面向对象设计(OOD)有助于我们开发出高性能.易扩展以及易复用的程序.其中,OOD有一个重要的思想那就是依赖倒置原则(DIP),并由此引申出IoC.DI以及Ioc容器等概念.通过本文我们将一起学 ...
- 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法
在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常. 意思是出现了死循环,也就是Model之间有循环包含关系: ...
- CoreCRM 开发实录——想用国货不容易
昨天(2016年12月29日)发了开始开发的文章.本来晚上准备在 Coding.NET 上添加几个任务开始搞起了.可是真的开始用的时候才发现:Coding.NET 的任务功能只针对私有的任务开放.我想 ...
- nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证
http模块内部封装了http服务器和客户端,因此Node.js不需要借助Apache.IIS.Nginx.Tomcat等传统HTTP服务器,就可以构建http服务器,亦可以用来做一些爬虫.下面简单介 ...
- ASP.NET Core project.json imports 是什么意思?
示例代码: "frameworks": { "netcoreapp1.0.0": { "imports" : "portable- ...
- Oracle安装部署,版本升级,应用补丁快速参考
一.Oracle安装部署 1.1 单机环境 1.2 Oracle RAC环境 1.3 Oracle DataGuard环境 1.4 主机双机 1.5 客户端部署 二.Oracle版本升级 2.1 单机 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- JAVA装饰者模式(从现实生活角度理解代码原理)
装饰者模式可以动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 该模式的适用环境为: (1)在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职 ...
- appium+robotframework环境搭建
appium+robotframework环境搭建步骤(Windows系统的appium自动化测试,只适用于测试安卓机:ios机需要在mac搭建appium环境后测试) 搭建步骤,共分为3部分: 一. ...