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"> ...
随机推荐
- Day15_用户中心接口说明
学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 用户中心 ...
- PHP xml_set_external_entity_ref_handler() 函数
定义和用法 xml_set_external_entity_ref_handler() 函数规定当解析器在 XML 文档中找到外部实体时被调用的函数. 如果成功,该函数则返回 TRUE.如果失败,则返 ...
- 埋在MySQL数据库应用中的17个关键问题！
作者:扎瓦陈序元 来源:https://blog.csdn.net/weixin_42882439 MySQL的使用非常普遍,跟MySQL有关的话题也非常多,如性能优化.高可用性.强一致性.安全.备份 ...
- 笨办法学python3代码练习ex23.py 字符串字节串字符编码
首先简单说一下字符编码的问题.平常遇到比较多的就是ASCII码(全称:美国信息交换标准码).ASCII码使用一个字节(8位)来表示一些常见的数字.英文字母以及一些控制字符.英语用128个符号编码就够了 ...
- Eclipse RCP：多平台部署
1 问题 在使用Eclipse RCP IDE进行开发时,它自带的PDE(插件开发环境)工具仅能够导出相同平台的部署包,比如win32的仅能导出win32的,linux64仅能够导出linux64的. ...
- vue中一些常见的面试题
前言 一位正在学习前端的菜鸟,虽菜,但还未放弃. 内容 1,说一下vue中的指令 答: ①,v-html:主要用来渲染html节点,其作用与原生的innerHtml基本一致 ②,v-text:主要用来 ...
- 一招教你如何在Python中使用Torchmoji将文本转换为表情符号
很难找到关于如何使用Python使用DeepMoji的教程.我已经尝试了几次,后来又出现了几次错误,于是决定使用替代版本:torchMoji. TorchMoji是DeepMoji的pyTorch实现 ...
- 用 Python 制作关不掉的端午安康弹窗
端午节又称端阳节.龙舟节.重午节.龙节.正阳节.天中节等,端午节源自天象崇拜,由上古时代祭龙演变而来,因传说战国时期的楚国诗人屈原在五月五日跳汨罗江自尽,后来人们亦将端午节作为纪念屈原的节日,在端午节 ...
- Ant Design Pro V5 从服务器请求菜单（typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro(下文简写antd pro)这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro ...
- 2、Java 基础语法标识符、修饰符、变量、 数组、枚举、关键字
Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...