Xuanmo Blog

3D全屏滚动思路：

先搭好3D盒子，4个div与浏览器等宽等高，点击让大的div顺着X轴旋转。最佳查看浏览器（chrome）源码如下：

html部分

<div id="box">
    <div class="img front"></div>
    <div class="img bottom"></div>
    <div class="img back"></div>
    <div class="img top"></div>
  </div>
  <ul></ul>

css

*{ margin: 0; padding: 0; }
html,body,#box{ width: 100%; height: 100%; }
body{ perspective: 3000px; min-width: 1200px; overflow: hidden; }
#box{ transform-style: preserve-3d; transition: 1s ease-in; transform: translateZ(0px) rotateX(0deg); }
.img{ overflow: hidden; position: absolute; width: 100%; height: 100%; }
.front{ background: url(http://file.xuanmomo.com/T3-lg.jpg); background-size: 100% 100%; transform: translateZ(400px); }
.bottom{ background: url(http://file.xuanmomo.com/T2-lg.jpg); background-size: 100% 100%; transform: translateY(400px) rotateX(90deg) rotateZ(180deg); }
.top{ background: url(http://file.xuanmomo.com/T6-lg.jpg); background-size: 100% 100%; transform: translateY(-400px) rotateX(90deg); }
.back{ background: url(http://file.xuanmomo.com/T1-lg.jpg); background-size: 100% 100%; transform: translateZ(-400px) rotateX(180deg); }
ul{ position: absolute; z-index: 9; top: 50%; right: 50px; width: 150px; margin-top: -168px; }
ul li{ list-style: none; width: 150px; height: 84px; margin: 10px 0; box-shadow: 0 0 10px #AAE4FE; transition: .7s; cursor: pointer; }
ul li:nth-of-type(1){ background: url(http://file.xuanmomo.com/T3-lg.jpg); background-size: 100% 100%; }
ul li:nth-of-type(2){ background: url(http://file.xuanmomo.com/T2-lg.jpg); background-size: 100% 100%; }
ul li:nth-of-type(3){ background: url(http://file.xuanmomo.com/T1-lg.jpg); background-size: 100% 100%; }
ul li:nth-of-type(4){ background: url(http://file.xuanmomo.com/T6-lg.jpg); background-size: 100% 100%; }
ul li:hover{ transform: scale(1.1) }

js

var oBox = document.getElementById('box');
var aImgBox = oBox.getElementsByTagName('div');
var oUl = document.getElementsByTagName('ul')[0];
for (var i = 0; i < aImgBox.length; i++) {
    oUl.innerHTML += '
';
}
var aLi = oUl.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
    aLi[i].index = i;
    aLi[i].onclick = function () {
        oBox.style.cssText = 'transform:translateZ(-400px) rotateX(' + (this.index * 90) + 'deg);';
    }
}

DEMO展示