类vr特效的360度全景
做法有点粗糙，没有去优化一下，只是使用了css3的技术去玩了一下；
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D-VR</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <style> body{ margin: 0; } html,body{ width: 100%; height: 100%; } #wrap2{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; transform:translateZ(200px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; perspective: 300px; } #wrap{ width: 1024px; height: 1024px; position: absolute; top: 50%; left: 50%; margin: -512px 0 0 -512px; border:1% solid #000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateY(0deg); transition: 20s; } .vr{ width: 100%; height: 100%; color: #fff; position: absolute; } .vr:nth-of-type(1){ background: url(img/neg-x.png) no-repeat; background-size: 100% 100%; transform: rotateY(0deg) translateZ(-512px); backface-visibility: hidden; } .vr:nth-of-type(2){ background: url(img/pos-z.png) no-repeat; background-size: 100% 100%; transform: rotateY(-90deg) translateZ(-512px); backface-visibility: hidden; } .vr:nth-of-type(3){ background: url(img/pos-x.png) no-repeat; background-size: 100% 100%; transform: rotateY(-180deg) translateZ(-512px); backface-visibility: hidden; } .vr:nth-of-type(4){ background: url(img/neg-z.png) no-repeat; background-size: 100% 100%; transform: rotateY(-270deg) translateZ(-512px); backface-visibility: hidden; } .vr:nth-of-type(5){ background: url(img/pos-y.png) no-repeat; background-size: 100% 100%; transform: rotateX(-90deg) translateZ(-512px); backface-visibility: hidden; } .vr:nth-of-type(6){ background: url(img/neg-y.png) no-repeat; background-size: 100% 100%; transform: rotateX(90deg) translateZ(-512px); backface-visibility: hidden; } </style> </head> <body> <!-- 3d盒子的原理上实现，就是六张图片拼成 --> <!-- 利用translate不移动原点的方式移动各个的相对于原点的位置，到达移动原点的方式 而这也解决了ios的transform-origin不兼容问题 只要移动祖先级就可以达到translate带来的缩放问题 transform 执行顺序是最后写先执行 --> <div id="wrap2"> <div id="wrap"> <div class="vr">1</div> <div class="vr">2</div> <div class="vr">3</div> <div class="vr">4</div> <div class="vr">5</div> <div class="vr">6</div> </div> </div> <script> window.onload=function(){ document.querySelector("#wrap").onclick=function(){ document.querySelector("#wrap").style.transform="rotateY(360deg)"; } } </script> </body> </html>
