3D全屏滚动案例
分类: 实战案例 3982 0
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);';
}
}
共 0 条评论关于 “3D全屏滚动案例”