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"> ...
随机推荐
- Python网络编程基础 PDF 完整超清版|网盘链接内附提取码下载|
点此获取下载地址提取码:y9u5 Python网络编程最好新手入门书籍!175个详细案例,事实胜于雄辩,Sockets.DNS.Web Service.FTP.Email.SMTP.POP.IMAP. ...
- matplotlib 去掉坐标轴
#去掉x轴 plt.xticks([]) #去掉y轴 plt.yticks([]) #去掉坐标轴 plt.axis('off') 2020-06-26
- Python字符串内建函数_下
Python字符串内建函数: 1.join(str) : 使用调用的字符串对 str 进行分割,返回值为字符串类型 # join(str) : # 使用调用的字符串对 str 进行分割. strs = ...
- python基础day7_编码及小数据池
数字概念,字符串----小数据池 数字的范围:-5---256 字符串: 1,不能有特殊字符 2,s*20还是同一个地址,s*21之后就是另外一个地址 i1 = 6 i2 = 6 print(id(i ...
- PHP asort() 函数
------------恢复内容开始------------ 实例 对关联数组按照键值进行升序排序: <?php$age=array("Peter"=>"35 ...
- HTML <html> manifest 属性
实例 带有缓存 manifest 的 HTML 文档(用于离线浏览): <!DOCTYPE HTML><html manifest="demo.appcache" ...
- PHP print() 函数
实例 输出一些文本: <?php print "Hello world!"; ?>高佣联盟 www.cgewang.com 定义和用法 print() 函数输出一个或多 ...
- Android Studio中如何使用自定义的framework库
在安卓app开发中,通常不会遇到需要使用自定义framework库的情况,使用的都是标准的内核库.但也有例外,比如针对定制化的ROM,ROM厂商可能在ROM中对安卓源码做过修改,对应用层app暴露出与 ...
- jsp应用-实现用户登陆功能
项目结构 1.login.jsp 这个没什么好说的,把表单提交到校验页面进行校验 2.首先获取request域中user,password,然后进行校验,校验成功把信息存入session域,然后转发到 ...
- com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'user'
nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'user' 可能错误原因: ...