爱站程序员基地3d旋转相册
效果图：
代码如下：
<!doctype html><html><head><meta charset=\"utf-8\"/><title>girlfriend</title><style>body{margin:0;background:#000;}#wrap{width:300px;height:400px;position: relative;margin: 300px auto;-webkit-perspective:3000px;-moz-perspective:3000px;-ms-transform:perspective(3000px);-ms-perspective:3000px;}#head{width:100%;height:100%;position: absolute;-webkit-transform-style: preserve-3d;-webkit-animation:donghua 15s linear 0s infinite;-moz-transform-style: preserve-3d;-moz-animation:donghua 15s linear 0s infinite;-ms-transform-style: preserve-3d;-ms-animation:donghua 25s linear 0s infinite;}#head div{position: absolute;top:0;left:0;width:300px;height:400px;border:1px solid #000text-align: center;line-height:100px;}#head div:nth-child(1){-webkit-transform:rotateY(0deg) translateZ(400px);-moz-transform:rotateY(0deg) translateZ(400px);-ms-transform:rotateY(0deg) translateZ(400px);background:url(images/01.jpg);background-size:cover;}#head div:nth-child(2){-webkit-transform:rotateY(36deg) translateZ(500px);-moz-transform:rotateY(36deg) translateZ(500px);-ms-transform:rotateY(36deg) translateZ(500px);background:url(images/02.jpg);background-size:cover;}#head div:nth-child(3){-webkit-transform:rotateY(72deg) translateZ(400px);-moz-transform:rotateY(72deg) translateZ(400px);-ms-transform:rotateY(72deg) translateZ(400px);background:url(images/03.jpg);background-size:cover;}#head div:nth-child(4){-webkit-transform:rotateY(108deg) translateZ(500px);-moz-transform:rotateY(108deg) translateZ(500px);-ms-transform:rotateY(108deg) translateZ(500px);background:url(images/04.jpg);background-size:cover;}#head div:nth-child(5){-webkit-transform:rotateY(144deg) translateZ(400px);-moz-transform:rotateY(144deg) translateZ(400px);-ms-transform:rotateY(144deg) translateZ(400px);background:url(images/05.jpg);background-size:cover;}#head div:nth-child(6){-webkit-transform:rotateY(180deg) translateZ(500px);-moz-transform:rotateY(180deg) translateZ(500px);-ms-transform:rotateY(180deg) translateZ(500px);background:url(images/06.jpg);background-size:cover;}#head div:nth-child(7){-webkit-transform:rotateY(216deg) translateZ(400px);-moz-transform:rotateY(216deg) translateZ(400px);-ms-transform:rotateY(216deg) translateZ(400px);background:url(images/07.jpg);background-size:cover;}#head div:nth-child(8){-webkit-transform:rotateY(252deg) translateZ(500px);-moz-transform:rotateY(252deg) translateZ(500px);-ms-transform:rotateY(252deg) translateZ(500px);background:url(images/08.jpg);background-size:cover;}#head div:nth-child(9){-webkit-transform:rotateY(288deg) translateZ(400px);-moz-transform:rotateY(288deg) translateZ(400px);-ms-transform:rotateY(288deg) translateZ(400px);background:url(images/04.jpg);background-size:cover;}#head div:nth-child(10){-webkit-transform:rotateY(324deg) translateZ(500px);-moz-transform:rotateY(324deg) translateZ(500px);-ms-transform:rotateY(324deg) translateZ(500px);background:url(images/07.jpg);background-size:cover;}@-webkit-keyframes donghua{0%{transform:rotateX(5deg) rotateY(360deg)}50%{transform:rotateX(-5deg) rotateY(180deg)}100%{transform:rotateX(5deg) rotateY(0deg)}}@-moz-keyframes donghua{0%{transform:rotateY(10deg) rotateY(0deg)}50%{transform:rotateY(-10deg) rotateY(180deg)}100%{transform:rotateY(10deg) rotateY(360deg)}}@-ms-keyframes donghua{0%{transform:rotateY(10deg) rotateY(0deg)}50%{transform:rotateY(-10deg) rotateY(180deg)}100%{transform:rotateY(10deg) rotateY(360deg)}}</style></head><body><audio controls><source src=\"2.ogg\"type=\"audio/ogg\"><source src=\"2.mp4\"type=\"audio/ogg\"></audio><div id=\"wrap\"><div id=\"head\"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></body></html>
