css3特效-3D动态照片墙
2017-02-08 本文已影响0人
木木口丁
效果展示
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #b8e6b3;
transition: background-color .8s
}
#content {
width: 1190px;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
transform-style: preserve-3d;
transform: perspective(1200px) rotateX(0deg) rotateY(0deg)
}
.box {
width: 150px;
height: 150px;
position: relative;
margin: 12px 0;
transition: .3s;
transform-style: preserve-3d;
transform: perspective(1200px) rotateX(0deg) rotateY(0deg)
}
.box div {
width: 150px;
height: 150px;
text-align: center;
color: #fff;
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
box-sizing: border-box;
overflow: hidden
}
.box:nth-child(1n) div {
background: #f0f0f0 url(1.png) no-repeat center
}
.box:nth-child(2n) div {
background: #f0f0f0 url(2.png) no-repeat center
}
.box:nth-child(3n) div {
background: #f0f0f0 url(3.png) no-repeat center
}
.box div:nth-of-type(1) {
transform: translateZ(75px)
}
.box div:nth-of-type(2) {
transform: translateZ(-75px)
}
.box div:nth-of-type(3) {
transform: translateY(75px) rotateX(-90deg)
}
.box div:nth-of-type(4) {
transform: translateY(-75px) rotateX(90deg)
}
.box div:nth-of-type(5) {
transform: translateX(75px) rotateY(90deg)
}
.box div:nth-of-type(6) {
transform: translateX(-75px) rotateY(90deg)
}
.box span {
display: block;
width: 70px;
height: 70px;
position: absolute;
right: -35px;
bottom: -35px;
border-radius: 50%;
text-indent: 9%;
line-height: 45px;
text-align: left;
font-size: 18px;
font-family: "微软雅黑"
}
.box:nth-child(1n) span {
background: #f8af8d
}
.box:nth-child(2n) span {
background: #f8d18d
}
.box:nth-child(3n) span {
background: #8df88d
} </style>
<script
>window.onload = function() {
eval(function(p, a, c, k, e, d) {
e = function(c) {
return(c < a ? "" : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
};
if(!''.replace(/^/, String)) {
while(c--) d[e(c)] = k[c] || e(c);
k = [function(e) {
return d[e]
}];
e = function() {
return '\\w+'
};
c = 1;
};
while(c--)
if(k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
return p;
}('2 h=4.F("h");2 6=4.H(".L");2 b=[\'f(8)\',\'f(-8)\',\'g(8)\',\'g(-8)\'];2 a=[\'#z\',\'#D\',\'#M\',\'#C\',\'#A\',\'#B\',\'#j\',\'#l\',\'#q\',\'#J\',\'#z\',\'#D\',\'#C\',\'#A\',\'#B\',\'#j\',\'#l\',\'#q\',\'#I\',\'#K\'];G(2 i=0;i<6.d;i++){6[i].E=c(9){2 s=b[7.o(7.p()*(b.d-1))];r.3.e=\'u(w) V(U) \'+s;4.n.3.k=a[7.o(7.p()*(a.d-1))]};6[i].W=c(){r.3.e=\'\';4.n.3.k=\'X(Y,P,O)\'}}4.N=c(9){2 x=(0.5-9.Q/t.T)*v;2 y=(9.S/t.R-0.5)*v;h.3.e=\'u(w) f(\'+x+\'m) g(\'+y+\'m)\'};', 61, 61, '||var|style|document||divs|Math|180deg|ev|colors|rot|function|length|transform|rotateX|rotateY|content||EEDECD|background|B8E6B3|deg|body|round|random|ABE3D8|this|css|window|perspective|15|1200px|||F7E8ED|DDF4DE|F0F1D5|E0ECF5|F2D9E6|onmouseenter|getElementById|for|querySelectorAll|DFD1F0|E0E1F5|6161616|box|ECC6DE|onmousemove|179|230|clientY|innerWidth|clientX|innerHeight|150px|translateZ|onmouseleave|rgb|184'.split('|'), 0, {}))
};
</script>
</head>
<body>
<div id="content">
<div class="box">
<div><span>1</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>2</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>3</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>4</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>5</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>6</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>7</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>8</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>9</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>10</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>11</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>12</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>13</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>14</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>15</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>16</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>17</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>18</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>19</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>20</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>21</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>22</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>23</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>24</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>25</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>26</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>27</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div><span>28</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
