超火的程序员表白女朋友立体相册html网页代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效果较好的EDGE浏览器预览本源码。
代码如下:
1.index.html文件代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3D photo album By www.xiaoyaogzs.com</title> <link rel="stylesheet" href="css/CSS.css" /> </head> <body>
<div class="wrap">
<div class="cube">
<div class="out_front"> <img src="img/1.jpg" class="pic" > </div>
<div class="out_back"> <img src="img/2.jpg" class="pic"> </div>
<div class="out_left"> <img src="img/3.jpg" class="pic"> </div> <div class="out_right"> <img src="img/4.jpg" class="pic"> </div> <div class="out_top"> <img src="img/5.jpg" class="pic"> </div> <div class="out_bottom"> <img src="img/6.jpg" class="pic"> </div>
<span class="in_front"> <img src="img/7.jpg" class="in_pic" /> </span> <span class="in_back"> <img src="img/8.jpg" class="in_pic" /> </span> <span class="in_left"> <img src="img/9.jpg" class="in_pic" /> </span> <span class="in_right"> <img src="img/10.jpg" class="in_pic" /> </span> <span class="in_top"> <img src="img/11.jpg" class="in_pic" /> </span> <span class="in_bottom"> <img src="img/12.jpg" class="in_pic" /> </span> </div> </div> </body> </html>
|
2.CSS.css文件代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
| html{ background:pink; height: 100%; }
.wrap{ width: 10px; height: 10px;
margin: 200px 400px; position: relative; }
.cube{ width:600px; height:400px; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-80deg); -webkit-animation: rotate 20s infinite;
animation-timing-function: linear; } @-webkit-keyframes rotate{ from{transform: rotateX(0deg) rotateY(0deg);} to{transform: rotateX(360deg) rotateY(360deg);} } .cube div{ position: absolute; width: 300px; height: 300px; opacity: 0.8; transition: all .4s; }
.pic{ width: 300px; height: 300px; } .cube .out_front{ transform: rotateY(0deg) translateZ(150px); } .cube .out_back{ transform: translateZ(-150px) rotateY(180deg); } .cube .out_left{ transform: rotateY(90deg) translateZ(150px); } .cube .out_right{ transform: rotateY(-90deg) translateZ(150px); } .cube .out_top{ transform: rotateX(90deg) translateZ(150px); } .cube .out_bottom{ transform: rotateX(-90deg) translateZ(150px); }
.cube span{ display: bloack; width: 200px; height: 200px; position: absolute; top: 50px; left: 50px; } .cube .in_pic{ width: 200px; height: 200px; } .cube .in_front{ transform: rotateY(0deg) translateZ(100px); } .cube .in_back{ transform: translateZ(-100px) rotateY(180deg); } .cube .in_left{ transform: rotateY(90deg) translateZ(100px); } .cube .in_right{ transform: rotateY(-90deg) translateZ(100px); } .cube .in_top{ transform: rotateX(90deg) translateZ(100px); } .cube .in_bottom{ transform: rotateX(-90deg) translateZ(100px); }
.cube:hover .out_front{ transform: rotateY(0deg) translateZ(400px); } .cube:hover .out_back{ transform: translateZ(-400px) rotateY(180deg); } .cube:hover .out_left{ transform: rotateY(90deg) translateZ(400px); } .cube:hover .out_right{ transform: rotateY(-90deg) translateZ(400px); } .cube:hover .out_top{ transform: rotateX(90deg) translateZ(400px); } .cube:hover .out_bottom{ transform: rotateX(-90deg) translateZ(400px); }
|
3.图片放在img里文件夹,需要12张,文件名命名为1-12.jpg,
文件目录如图: