3d相册展示
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>3d相册展示</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
background-color: silver;
}
.my-container {
width: 100%;
height: 200px;
margin: 0px auto;
margin-top: 200px;
/*border-radius: 20px;*/
/*background-color: firebrick;*/
}
.my-container .photo {
/*border-radius: 20px;*/
height: 100%;
width: 100%;
perspective: 1200px;
perspective-origin: 613px -800px;
animation: shijiao 3s linear infinite alternate 4s;
}
@keyframes shijiao {
from {
perspective: 1200px;
perspective-origin: 613px -800px;
}
to {
perspective: 1200px;
perspective-origin: 613px 300px;
}
}
.my-container .photo .container {
height: 100%;
width: 100px;
transform-style: preserve-3d;
position: relative;
margin: 0px auto;
/*border-radius: 20px;*/
animation: xuanzhuan 5s linear 4s infinite;
}
@keyframes xuanzhuan {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
.my-container .photo .container .img {
height: 200px;
width: 100px;
/*background-color: darkgoldenrod;*/
position: absolute;
border-radius: 20px;
background-color: transparent;
/*border: 3px solid white;*/
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
img {
height: 180px;
width: 90px;
display: block;
margin: 10px 5px;
}
.img1 {
/*background-color: red;*/
transform: translateZ(0px);
animation: zhuan1 4s linear forwards;
}
@keyframes zhuan1 {
14.28% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
28.56% {
transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
}
42.84% {
transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
}
57.12% {
transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
}
71.40% {
transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);
}
85.68% {
transform: translateX(300px) translateZ(0px) rotateY(-270deg);
}
100% {
transform: translateX(212.1px) translateZ(212.1px) rotateY(-315deg);
}
}
.img2 {
/*background-color: black;*/
transform: translateZ(-10px);
animation: zhuan2 3.5s linear .5s forwards;
}
@keyframes zhuan2 {
16.6% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
33.2% {
transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
}
49.8% {
transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
}
66.4% {
transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
}
83% {
transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);
}
100% {
transform: translateX(300px) translateZ(0px) rotateY(-270deg);
}
}
.img3 {
/*background-color: khaki;*/
transform: translateZ(-20px);
animation: zhuan3 3s linear 1s forwards;
}
@keyframes zhuan3 {
20% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
40% {
transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
}
60% {
transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
}
80% {
transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
}
100% {
transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);
}
}
.img4 {
/*background-color: violet;*/
transform: translateZ(-30px);
animation: zhuan4 2.5s linear 1.5s forwards;
}
@keyframes zhuan4 {
25% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
50% {
transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
}
75% {
transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
}
100% {
transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
}
}
.img5 {
/*background-color: aqua;*/
transform: translateZ(-40px);
animation: zhuan5 2s linear 2s forwards;
}
@keyframes zhuan5 {
33.3% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
66.6% {
transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
}
100% {
transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
}
}
.img6 {
/*background-color: saddlebrown;*/
transform: translateZ(-50px);
animation: zhuan6 1.5s linear 2.5s forwards;
}
@keyframes zhuan6 {
50% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
100% {
transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
}
}
.img7 {
/*background-color: darkblue;*/
transform: translateZ(-60px);
animation: zhuan7 1s linear 3s forwards;
}
@keyframes zhuan7 {
100% {
transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
}
}
.img8 {
/*background-color: hotpink;*/
transform: translateZ(-70px);
animation: zhuan8 .5s linear 3.5s forwards;
}
@keyframes zhuan8 {
100% {
transform: translateZ(300px);
}
}
</style>
</head>
<body>
<div class="my-container">
<div class="photo">
<div class="container">
<div class="img img1">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/1.jpg"/>
</div>
<div class="img img2">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/2.jpg"/>
</div>
<div class="img img3">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/3.jpg"/>
</div>
<div class="img img4">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/4.jpg"/>
</div>
<div class="img img5">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/5.jpg"/>
</div>
<div class="img img6">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/6.jpg"/>
</div>
<div class="img img7">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/7.jpg"/>
</div>
<div class="img img8">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/8.jpg"/>
</div>
<div class="img img9">
<img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/9.jpg"/>
</div>
</div>
</div>
</div>
</body>
</html>
3d相册展示的更多相关文章
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- 制作简易的3D相册
今天介绍一下3D相册,用到了开源的FeatureCoverFlow控件,之前的几个作品用的也全都是开源的控件,为什么要用开源的控件呢,因为...他稳定啊! 1.准备 仍然是,去掉标题栏,然后导 ...
- 超酷3D照片展示效果
@{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- 程序员用HTML5给女朋友制作的3D相册
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...
- Objective－c——UI基础开发第十二天（相册展示）
一.知识点 模仿新特性 UICollectionViewFlowLayout自定义布局 相册 瀑布流(淘宝购物之类的 二.复习 a.UICollectionView 和 tableview共享一套AP ...
- ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明
原文:ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 ArcGIS Portal 10.4 本地坐标系的web 3d地形展示制作说明 By 李远祥 ArcGIS Por ...
- 使用Jquery.js框架和CSS3实现3D相册的制作
有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...
- 使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧 效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
随机推荐
- MapReduce之Combiner合并
Combiner是MR程序中Mapper和Reducer之外的一种组件(本质是一个Reducer类) Combinr组件的父类就是Reducer Conbimer只有在驱动类里设置了之后,才会运行 C ...
- 完了！TCP出了大事！
前情回顾:<非中间人就不能劫持TCP了吗?> 不速之客 夜黑风高,乌云蔽月. 两位不速之客,身着黑衣,一高一矮,潜入Linux帝国. 这一潜就是一个多月,直到他们收到了一条消息······ ...
- Python time strftime()方法
描述 Python time strftime() 函数接收以时间元组,并返回以可读字符串表示的当地时间,格式由参数format决定.高佣联盟 www.cgewang.com 语法 strftime( ...
- Python List max()方法
描述 max() 方法返回列表元素中的最大值.高佣联盟 www.cgewang.com 语法 max()方法语法: max(list) 参数 list -- 要返回最大值的列表. 返回值 返回列表元素 ...
- PHP ignore_user_abort() 函数
实例 设置为 false(默认)- 与客户机断开会终止脚本的执行: <?phpignore_user_abort();?>高佣联盟 www.cgewang.com 上面代码的输出如下: 0 ...
- luogu P3180 [HAOI2016]地图 仙人掌 线段树合并 圆方树
LINK:地图 考虑如果是一棵树怎么做 权值可以离散 那么可以直接利用dsu on tree+树状数组解决. 当然 也可以使用莫队 不过前缀和比较难以维护 外面套个树状数组又带了个log 套分块然后就 ...
- CPU监控 线段树裸题
LINK:bzoj3064 此题甚好码了20min停下来思考的时候才发现不对的地方有点坑... 还真不好写来着 可这的确是线段树的裸题...我觉得我写应该没有什么大问题 不过思路非常的紊乱 如果是自己 ...
- 3.29省选模拟赛 除法与取模 dp+组合计数
LINK:除法与取模 鬼题.不过50分很好写.考虑不带除法的时候 其实是一个dp的组合计数. 考虑带除法的时候需要状压一下除法操作. 因为除法操作是不受x的大小影响的 所以要状压这个除法操作. 直接采 ...
- [转]Java死锁排查
文章来源:微信公众号:猿天地 1. 死锁的概念: 是Java多线程情况下,两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞现象,若无外力作用,它们都讲无法推进下去.此时称 ...
- 19-关键字package和import
1. package的使用1.1 使用说明: * 1.为了更好的实现项目中类的管理,提供包的概念 * 2.使用package声明类或接口所属的包,声明在源文件的首行 * 3.包,属于标识符,遵循标识符 ...