https://www.xuanmo.xin/1022.html

3D全屏滚动案例

发布于 分类: Html5 & CSS3案例 0 1354

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展示

    作者专栏:Xuanmo

    前端爱好者,热爱前端开发,欢迎和我成为朋友。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
    表情
    贴图
    表情加载中...

    换一张

    已经没有了!