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"> ...
随机推荐
- github提交报错
github正确提交步骤 https://www.cnblogs.com/alex-415/p/6912294.html 可能的错误 提交前没有先pull,主要的原因是在创建repository的时候 ...
- PHP imagecolorclosest - 取得与指定的颜色最接近的颜色的索引值
imagecolorclosest — 取得与指定的颜色最接近的颜色的索引值.高佣联盟 www.cgewang.com 语法 int imagecolorclosest ( resource $ima ...
- 使用Flask开发简单接口(5)--数据加密处理
前言 在之前开发的接口中,我们设计把用户信息存储到数据库时,没有对数据进行加密处理,为了提高下安全性,我们今天就学习下,如何对用户数据进行加密加盐处理. MD5加密加盐 MD5加密 MD5是常用的一种 ...
- 【FZYZOJ】下片 题解（最短路+超级源点）
题目描述 为了提高服务器的耐受能力,很多流量大的网站都会架设多台服务器,而互联网的路由能找到线路最短的一台服务器. 现在UOI想要下片,他有好多台电脑,又有好多服务器可以提供下载.UOI将给你一个网络 ...
- 在不同网段使用 VLAN 通信 - SVI，单臂路由
在 VLAN 这篇文章中知道,设置 VLAN 目的是隔离大型的广播域,将其分成很小的广播域,从而更好的管理.但也就带来了一些问题:如流量不能在不同的 VLAN 间通信. 而为了解决这个问题,可以采用如 ...
- 用python分析1225万条淘宝数据，终于搞清楚了我的交易行为
大家好,我是黄同学
- 用 Python 制作关不掉的端午安康弹窗
端午节又称端阳节.龙舟节.重午节.龙节.正阳节.天中节等,端午节源自天象崇拜,由上古时代祭龙演变而来,因传说战国时期的楚国诗人屈原在五月五日跳汨罗江自尽,后来人们亦将端午节作为纪念屈原的节日,在端午节 ...
- MyBatisPlus配置日志,CRUD的使用
配置日志 我们所有的sql在mybatisplus是不可见的,所以在开发中需要配置日志,开发完成后,就可以取消日志了,因为日志也是损耗资源的 #配置日志 mybatis-plus: configura ...
- Java单元测试 Junit TestNG之介绍
Junit是Java中默认的单元测试框架,通过注解的方式去识别测试方法 JUnit4 JUnit4通过注解的方式来识别测试方法.目前支持的主要注解有: @BeforeClass 全局只会执行一次,而且 ...
- matlab使用libsvm入门教程——使用matlab安装配置libsvm以及一个svm分类实例
前言 此教程专注于刚入门的小白, 且博客拥有时效性, 发布于2019年3月份, 可能后面的读者会发现一些问题, 欢迎底下评论出现的问题,我将尽可能更新解决方案. 我开始也在如何安装libsvm上出现了 ...