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无限循环
Python 无限循环:在 while 循环语句中,可以通过让判断条件一直达不到 False ,实现无限循环. 条件表达式: # var = 1 # while var == 1: # 表达式永远为 ...
- PHP date_timestamp_set() 函数
------------恢复内容开始------------ 实例 设置基于 Unix 时间戳的日期和时间: <?php$date=date_create();date_timestamp_se ...
- 数据结构C语言实现----直接插入排序
直接插入排序(简单插入排序) 给定一个数字串:2 6 7 8 9 3 2 3 4 按从小到大的顺序排列输出 首先把第一个数字放到一个小组里:(2)6 7 8 9 3 2 3 4 让后从第二个数字开始往 ...
- Java 将数据写入全路径下的指定文件
package com.freud.algorithm.other; import java.io.File; import java.io.FileOutputStream; public clas ...
- linux之FTP服务搭建 ( ftp文件传输协议 VSFTPd虚拟用户)
FTP服务搭建 配置实验之前关闭防火墙 iptables -F iptables -X iptables -Z systemctl stop firewalld setenforce 0 1.ftp简 ...
- ios数组基本用法和排序大全
1.创建数组 // 创建一个空的数组 NSArray *array = [NSArray array]; // 创建有1个元素的数组 array = [NSArray arrayWithObject: ...
- python 版本 jaeger-client 导入失败 jaeger-client-python
环境为: OS: ubuntu18.04 Python: 3.6 问题原因: 尝试使用 jaeger-client-python,官方给出的示例(https://github.com/jaegertr ...
- Jenkins=====》部署到构建完成
目录 序言 正文 插件 系统管理 构建Maven项目 结尾 序言 大家好,我是龙宝,来自一个正在爬坑的java程序员,欢迎观看这一期的jenkins部署篇(V_V) 正文 这里我们直接上图看步 ...
- linux常用命令（二）服务器硬件资源信息
内存:free -m 硬盘:df -h 负载:w/top cpu个数和核数:cat /proc/cpuinfo
- C#LeetCode刷题之#101-对称二叉树（Symmetric Tree）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4068 访问. 给定一个二叉树,检查它是否是镜像对称的. 例如,二 ...