<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5多立方体3D翻转动画DEMO演示</title>
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
</style>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
overflow: hidden;
background: black;
}
.wrap {
height: 100%;
transform-style: preserve-3d;
perspective: 400px;
width: 1000px;
margin: 0 auto;
}
.box {
transform-style: preserve-3d;
perspective: 5000px;
position: absolute;
width: 50px;
height: 200px;
top: 50%;
margin-top: -100px;
animation: spin 3s infinite alternate;
}
.side, .top, .bottom {
position: absolute;
}
.top, .bottom {
width: 50px;
height: 50px;
}
.top {
transform: translateZ(100px);
}
.bottom {
transform: rotateY(180deg) translateZ(100px);
}
.side:nth-child(3) {
transform: rotateX(90deg) translateZ(50px);
width: 50px;
height: 200px;
}
.side:nth-child(4) {
width: 200px;
height: 50px;
transform: rotateY(90deg) translateZ(-100px);
}
.side:nth-child(5) {
width: 200px;
height: 50px;
transform: rotateY(-90deg) translateZ(50px);
}
.side:nth-child(6) {
width: 50px;
height: 200px;
transform: rotateX(-90deg) translateZ(-100px);
}
.box:nth-child(1) {
left: 0px;
animation-delay: -0.075s;
}
.box:nth-child(1) div {
background: rgba(255, 64, 0, 0.3);
border: 1px solid #ff4000;
}
.box:nth-child(2) {
left: 50px;
animation-delay: -0.15s;
}
.box:nth-child(2) div {
background: rgba(255, 128, 0, 0.3);
border: 1px solid #ff8000;
}
.box:nth-child(3) {
left: 100px;
animation-delay: -0.225s;
}
.box:nth-child(3) div {
background: rgba(255, 191, 0, 0.3);
border: 1px solid #ffbf00;
}
.box:nth-child(4) {
left: 150px;
animation-delay: -0.3s;
}
.box:nth-child(4) div {
background: rgba(255, 255, 0, 0.3);
border: 1px solid yellow;
}
.box:nth-child(5) {
left: 200px;
animation-delay: -0.375s;
}
.box:nth-child(5) div {
background: rgba(191, 255, 0, 0.3);
border: 1px solid #bfff00;
}
.box:nth-child(6) {
left: 250px;
animation-delay: -0.45s;
}
.box:nth-child(6) div {
background: rgba(128, 255, 0, 0.3);
border: 1px solid #80ff00;
}
.box:nth-child(7) {
left: 300px;
animation-delay: -0.525s;
}
.box:nth-child(7) div {
background: rgba(64, 255, 0, 0.3);
border: 1px solid #40ff00;
}
.box:nth-child(8) {
left: 350px;
animation-delay: -0.6s;
}
.box:nth-child(8) div {
background: rgba(0, 255, 0, 0.3);
border: 1px solid lime;
}
.box:nth-child(9) {
left: 400px;
animation-delay: -0.675s;
}
.box:nth-child(9) div {
background: rgba(0, 255, 64, 0.3);
border: 1px solid #00ff40;
}
.box:nth-child(10) {
left: 450px;
animation-delay: -0.75s;
}
.box:nth-child(10) div {
background: rgba(0, 255, 128, 0.3);
border: 1px solid #00ff80;
}
.box:nth-child(11) {
left: 500px;
animation-delay: -0.825s;
}
.box:nth-child(11) div {
background: rgba(0, 255, 191, 0.3);
border: 1px solid #00ffbf;
}
.box:nth-child(12) {
left: 550px;
animation-delay: -0.9s;
}
.box:nth-child(12) div {
background: rgba(0, 255, 255, 0.3);
border: 1px solid cyan;
}
.box:nth-child(13) {
left: 600px;
animation-delay: -0.975s;
}
.box:nth-child(13) div {
background: rgba(0, 191, 255, 0.3);
border: 1px solid deepskyblue;
}
.box:nth-child(14) {
left: 650px;
animation-delay: -1.05s;
}
.box:nth-child(14) div {
background: rgba(0, 127, 255, 0.3);
border: 1px solid #007fff;
}
.box:nth-child(15) {
left: 700px;
animation-delay: -1.125s;
}
.box:nth-child(15) div {
background: rgba(0, 64, 255, 0.3);
border: 1px solid #0040ff;
}
.box:nth-child(16) {
left: 750px;
animation-delay: -1.2s;
}
.box:nth-child(16) div {
background: rgba(0, 0, 255, 0.3);
border: 1px solid blue;
}
.box:nth-child(17) {
left: 800px;
animation-delay: -1.275s;
}
.box:nth-child(17) div {
background: rgba(64, 0, 255, 0.3);
border: 1px solid #4000ff;
}
.box:nth-child(18) {
left: 850px;
animation-delay: -1.35s;
}
.box:nth-child(18) div {
background: rgba(127, 0, 255, 0.3);
border: 1px solid #7f00ff;
}
.box:nth-child(19) {
left: 900px;
animation-delay: -1.425s;
}
.box:nth-child(19) div {
background: rgba(191, 0, 255, 0.3);
border: 1px solid #bf00ff;
}
.box:nth-child(20) {
left: 950px;
animation-delay: -1.5s;
}
.box:nth-child(20) div {
background: rgba(255, 0, 255, 0.3);
border: 1px solid magenta;
}
@keyframes spin {
0% {
transform: translateZ(-300px) rotateX(90deg);
}
25% {
transform: translateZ(-300px) rotateX(90deg);
}
75% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-90deg);
}
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class='wrap'>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='box'>
<div class='top'></div>
<div class='bottom'></div>
<div
OpenWallpaper.zip （56个子文件） 
OpenWallpaper-master Intercept 
Intercept.csproj 2KB Properties AssemblyInfo.cs 1KB .gitattributes 2KB OpenWallpaper InterceptKey.cs 3KB Win32Wrapper.cs 58KB InterceptMouse.cs 4KB Package PackageInstall.cs 427B Resources AppIcon.ico 55KB Icons.xaml 263B packages.config 527B App.xaml.cs 323B WindowDesktopBind.cs 4KB OpenWallpaper.csproj 13KB Wallpapers WallpaperManifest.cs 1KB WallpapersManifest.cs 3KB wallpaperManifest.json 535B Properties Settings.settings 195B Resources.Designer.cs 3KB AssemblyInfo.cs 2KB Settings.Designer.cs 1KB Resources.resx 5KB app.manifest 3KB wallpaper watch manifest.json 138B
index2.html 1KB index.html 830B js index.js 3KB
thumbnail.png 21KB css style.css 2KB rect_rotate manifest.json 144B index2.html 9KB index.html 6KB index.haml 121B scss style.scss 2KB js prefixfree.min.js 6KB config.rb 752B thumbnail.png 28KB css reset.css 774B style.css 4KB App.config 184B settings.json 95B App.xaml 598B Settings SettingsUtil.cs 2KB AppSettings.cs 1024B AppData.cs 279B UI WallpapersWindow.xaml.cs 9KB MainWindow.xaml.cs 17KB WallpapersWindow.xaml 4KB SettingsWindow.xaml 2KB MainWindow.xaml 783B SettingsWindow.xaml.cs 613B ShopWindow.xaml 3KB WallpaperItem.xaml.cs 2KB ShopWindow.xaml.cs 601B WallpaperItem.xaml 1KB OpenWallpaper.sln 2KB .gitignore 4KB资源评论
夏亦寒
- 粉丝: 3
- 资源: 18
最新资源
- 毕业设计A052-基于Java的健身房管理系统的设计与实现
- 模型预测电流控制-广义双矢量
- Python爬虫入门推荐+爬取商品数据进行数据分析+适用于测试、开发、运营等
- libusbK、libusb-win32、libwdi、USB视频设备 驱动安装包
- 江苏范特科技有限公司创投信息
- 上海零数科技有限公司创投信息
- 上海唯鲜良品食品科技有限公司创投信息
- 上海柚凡信息科技有限公司创投信息
- 上海域圆信息科技有限公司创投信息
- 上市公司财务指标数据集2023-2000年原始数据 含剔除金融STPT版本
- Qt中嵌入窗口，例如嵌入MainWindows、QWidget、QDialog等窗口
- matplotShowDataCSV2-最简单的数据绘图
- 深圳店匠科技有限公司创投信息
- 深圳莱芒生物科技有限公司创投信息
- 沈阳黛斯蓝伊莎生物科技有限公司创投信息
- 苏州引航生物科技有限公司创投信息
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
