照片墙（3D立体几何）
2024-03-22 18:40:15
效果展示：
全部代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@-webkit-keyframes spin {0% {-webkit-transform:rotateY(0deg);transform:rotateY(0deg)
}100% {-webkit-transform:rotateY(360deg);transform:rotateY(360deg)
}
}@-moz-keyframes spin {0% {-moz-transform:rotateY(0deg);transform:rotateY(0deg)
}100% {-moz-transform:rotateY(360deg);transform:rotateY(360deg)
}
}@-ms-keyframes spin {0% {-ms-transform:rotateY(0deg);transform:rotateY(0deg)
}100% {-ms-transform:rotateY(360deg);transform:rotateY(360deg)
}
}@-o-keyframes spin {0% {-o-transform:rotateY(0deg);transform:rotateY(0deg)
}100% {-o-transform:rotateY(360deg);transform:rotateY(360deg)
}
}@keyframes spin {0% {transform:rotateY(0deg)
}100% {transform:rotateY(360deg)
}
}
body {background: #000;color: white;
}
table {text-align: center;
}
.stage {width: 300px;height: 300px;margin: 15px auto;position: relative;-webkit-perspective: 300px;-moz-perspective: 300px;-ms-perspective: 300px;-o-perspective: 300px;perspective: 300px;
}
.container {top: 50%;left: 50%;margin: -100px 0 0 -100px;position: absolute;-webkit-transform: translateZ(-100px);-moz-transform: translateZ(-100px);-ms-transform: translateZ(-100px);-o-transform: translateZ(-100px);transform: translateZ(-100px);-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;
}
.container:hover {-moz-animation: spin 5s linear infinite;-o-animation: spin 5s linear infinite;-webkit-animation: spin 5s linear infinite;animation: spin 5s linear infinite;
}
.side {font-size: 60px;font-weight: bold;height: 200px;line-height: 200px;position: absolute;text-align: center;text-shadow: 0 -1px 0 rgba(0,0,0,0.2);text-transform: uppercase;width: 200px;
}
.front {-webkit-transform: translateZ(100px);-moz-transform: translateZ(100px);-ms-transform: translateZ(100px);-o-transform: translateZ(100px);transform: translateZ(100px);
}
.back {-webkit-transform: rotateX(180deg) translateZ(100px);-moz-transform: rotateX(180deg) translateZ(100px);-ms-transform: rotateX(180deg) translateZ(100px);-o-transform: rotateX(180deg) translateZ(100px);transform: rotateX(180deg) translateZ(100px);
}
.left {-webkit-transform: rotateY(-90deg) translateZ(100px);-moz-transform: rotateY(-90deg) translateZ(100px);-ms-transform: rotateY(-90deg) translateZ(100px);-o-transform: rotateY(-90deg) translateZ(100px);transform: rotateY(-90deg) translateZ(100px);
}
.right {-webkit-transform: rotateY(90deg) translateZ(100px);-moz-transform: rotateY(90deg) translateZ(100px);-ms-transform: rotateY(90deg) translateZ(100px);-o-transform: rotateY(90deg) translateZ(100px);transform: rotateY(90deg) translateZ(100px);
}
#wrap {position:relative;width:100px;height:250px;
}
#box {position:absolute;left:0;top:0;width: 80px;height: 200px;border-radius: 8px;animation: ball 10s linear infinite;
}
@keyframes ball {0% {left:0;top:0;}25% {left:20px;top:0;}50% {left:50px;top:50px;}75% {left:0;top:100px;}100% {left:0;top:0;}
}
</style>
<title>立体旋转墙</title>
</head><body>
<table><tr><td rowspan="4"><div id="wrap"><div id="box">此背景墙有立体旋转功能哦~</div></td><td rowspan="4" width="200px"> </td><!--中国--><td><div class="stage"><div class="container"><div class="side front"><img src="data:images/zhongguo01.jpeg"></div><div class="side back"><img src="data:images/zhongguo02.jpeg"></div><div class="side left"><img src="data:images/zhongguo03.jpeg"></div><div class="side right"><img src="data:images/zhongguo04.jpeg"></div></div></div></td><!--美国--><td><div class="stage"><div class="container"><div class="side front"><img src="data:images/meiguo01.jpeg"></div><div class="side back"><img src="data:images/meiguo02.jpeg"></div><div class="side left"><img src="data:images/meiguo03.jpeg"></div><div class="side right"><img src="data:images/meiguo04.jpeg"></div></div></div></td><!--印度--><td><div class="stage"><div class="container"><div class="side front"><img src="data:images/yindu01.jpeg"></div><div class="side back"><img src="data:images/yindu02.jpeg"></div><div class="side left"><img src="data:images/yindu03.jpeg"></div><div class="side right"><img src="data:images/yindu04.jpeg"></div></div></div></td></tr><tr><td>中国</td><td>美国</td><td>印度</td></tr><tr><!--埃及--><td><div class="stage"><div class="container"><div class="side front"><img src="data:images/aiji01.jpeg"></div><div class="side back"><img src="data:images/aiji02.jpeg"></div><div class="side left"><img src="data:images/aiji03.jpeg"></div><div class="side right"><img src="data:images/aiji04.jpeg"></div></div></div></td><!--法国--><td><div class="stage"><div class="container"><div class="side front"><img src="data:images/faguo01.jpeg"></div><div class="side back"><img src="data:images/faguo02.jpeg"></div><div class="side left"><img src="data:images/faguo03.jpeg"></div><div class="side right"><img src="data:images/faguo04.jpeg"></div></div></div></td><!--巴西--><td><div class="stage"><div class="container"><div class="side front"><img src="data:images/baxi01.jpeg"></div><div class="side back"><img src="data:images/baxi02.jpeg"></div><div class="side left"><img src="data:images/baxi03.jpeg"></div><div class="side right"><img src="data:images/baxi04.jpeg"></div></div></div></td></tr><tr><td>埃及</td><td>法国</td><td>巴西</td></tr>
</table>
</body>
</html>
- 图片大小为200px * 200px , 无法上传
照片墙（3D立体几何）相关推荐
- 纯css实现照片墙3D效果
每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...
- ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
- ❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备
元旦节快到了,在跨年夜前夕.是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ❤元旦节表白3D相册,在元 ...
- ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
- Gaze Estimation笔记——data normalization
最近在看一些视线检测(Gaze Estimation)相关的东西,由于之前没怎么接触过,所以也算是从头开始,很多新的东西要学.写一个系列笔记,把慢慢看懂的东西记录下来,做个整理,也方便以后回头查阅 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- 通过 Nginx 代理转发配置实现跨域（API 代理转发）
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...
- DSGN：基于深度立体几何网络的3D目标检测（香港大学提出）
主要思想与创新点 大多数最先进的三维目标检测器严重依赖激光雷达传感器.由于在三维场景中的预测不准确,基于图像的方法与基于激光雷达的方法在性能上仍有很大差距.本文提出了深度立体几何网络(DSGN)的方法 ...
- jsp图片墙_JS实现的非常漂亮的3D立体照片墙显示效果
[实例简介] JS实现的非常漂亮的3D立体照片墙显示效果 [实例截图] [核心代码] JS实现的非常漂亮的3D立体照片墙显示效果 └── 3D立体照片墙 ├── images │ ├── 0e85 ...
最新文章
- Java DecimalFormat 用法 小数位的处理 公司内部处理小数位
- 3.5 梯度校验-机器学习笔记-斯坦福吴恩达教授
- Javascript设计模式理论与实战：适配器模式
- Protobuf序列化的原理-总结
- adb push命令传文件到手机_Android调试桥(adb)
- dede 验证码不显示 vdimgck.php,织梦(dedecms)后台登录验证码不显示或不正常的解决方法...
- latex 常用环境（environment）
- 线搜索中有最速下降法、牛顿法、拟牛顿法、共轭梯度法汇总
- java研磨设计模式_研磨设计模式之单例模式(内部类)
- jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作
- 2021软考软件设计师真题
- 【老生谈算法】matlab实现MF-TDMA系统中多用户多业务的无线接入控制和时隙分配算法源码——时隙分配算法
- 远程控制软件app有哪些？
- 提升网站关键词的排名
- 利用MsChart控件绘制多曲线图表 z
- opencv python 人脸识别 相似度_OpenCV+Tensorflow实现实时人脸识别演示
- 让我们并肩作战—机房合作
- 项目文档编制-招标书
- 透视C# Span＜T＞数据结构
- catia投图只投外轮廓线_CATIA自动投图使用说明（自动出工程图）