前端CSS3实现3D相册小案例

HTML代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D相册</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> <body>
<div class="box">
<ul class="minbox">
<li><img src="3D相册图片/01.jpg" width="100" height="100"></li>
<li><img src="3D相册图片/02.jpg" width="100" height="100"></li>
<li><img src="3D相册图片/03.jpg" width="100" height="100"></li>
<li><img src="3D相册图片/04.jpg" width="100" height="100"></li>
<li><img src="3D相册图片/05.jpg" width="100" height="100"></li>
<li><img src="3D相册图片/06.jpg" width="100" height="100"></li>
</ul>
<ol class="maxbox">
<li><img src="3D相册图片/1.jpg" width="400" height="400"></li>
<li><img src="3D相册图片/2.jpg" width="400" height="400"></li>
<li><img src="3D相册图片/3.jpg" width="400" height="400"></li>
<li><img src="3D相册图片/4.jpg" width="400" height="400"></li>
<li><img src="3D相册图片/5.jpg" width="400" height="400"></li>
<li><img src="3D相册图片/6.jpg" width="400" height="400"></li>
</ol>
</div>
</body>
</html>

CSS部分代码：

@charset "utf-8";
*{margin:0;padding:0;
}
body{max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: auto;margin-right: auto;
}
li{list-style: none;
}
.box{width:200px;height:200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: 42%;margin-top: 22%;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(13deg);-webkit-animation:move 5s linear infinite;
}
.minbox{width:100px;height:100px;position: absolute;left:50px;top:30px;-webkit-transform-style:preserve-3d;
}
.minbox li{width:100px;height:100px;position: absolute;left:0;top:0;
}
.minbox li:nth-child(1){background: url(../img/01.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){background: url(../img/02.png) no-repeat 0 0;-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){background: url(../img/03.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){background: url(../img/04.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){background: url(../img/05.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){background: url(../img/06.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){background: url(../img/1.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){background: url(../img/2.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){background: url(../img/3.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){background: url(../img/4.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){background: url(../img/5.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){background: url(../img/6.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;}
.maxbox li{width: 200px;height: 200px;background: #fff;border:1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){-webkit-transform:translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
@keyframes move{0%{-webkit-transform: rotateX(13deg) rotateY(0deg);}100%{-webkit-transform:rotateX(13deg) rotateY(360deg);}
}

前端CSS3实现3D相册小案例相关推荐

Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
前端——JS之定时器的小案例（1）
定时器点名小案例(抽奖游戏也同理)&&详细注释 <!DOCTYPE html> <html lang="en"> <head>& ...
HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车
目录一.素材提取方法二.图标三.实现 (1)效果图 (2)图片素材 (3)代码花了三天时间将HTML4,HTML5,CSS2,CSS3大致学习了一下,现在来做一个网页实践一下,我是准备专攻后端 ...
前端css3实现 3D立体盒子动画
HTML代码  <div id="parent"><div></div><div></di ...
用原生js实现一个美女相册小案例
注意案例中使用的图片需要自己替换成本地文件: <!DOCTYPE html> <html> <head lang="en"><meta c ...
css3 3d旋转兼容模式下,前端CSS3： 3D旋转的问题（请水神和毒舌放过）
[HTML] 纯文本查看复制代码 Document body { perspective: 500px; } .box { position: relative; width: 300px; hei ...
前端vue实现高级检索小案例
剑阁峥嵘而崔嵬,一夫当关,万夫莫开
前端小案例之3D导航栏
简单3D导航栏案例-鼠标经过盒子时底部盒子旋转最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家. 文章目录简单3D导航栏案例-鼠标经过盒子时底部盒子旋转一 ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...

前端CSS3实现3D相册小案例

前端CSS3实现3D相册小案例

前端CSS3实现3D相册小案例相关推荐

最新文章

热门文章