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: .5s ease-in;
    transform: translateZ(0px) rotateX(0deg);
}

.img {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.front {
    background: url(https://upyun.xuanmo.xin/bizhi/20220913235110059802.jpg);
    background-size: 100% 100%;
    transform: translateZ(415px);
}

.bottom {
    background: url(https://upyun.xuanmo.xin/bizhi/20220913235117007246.jpg);
    background-size: 100% 100%;
    transform: translateY(415px) rotateX(90deg) rotateZ(180deg);
}

.top {
    background: url(https://upyun.xuanmo.xin/bizhi/20220120000806959214.jpg);
    background-size: 100% 100%;
    transform: translateY(-415px) rotateX(90deg);
}

.back {
    background: url(https://upyun.xuanmo.xin/bizhi/20220913235114600316.jpg);
    background-size: 100% 100%;
    transform: translateZ(-415px) 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(https://upyun.xuanmo.xin/bizhi/20220913235110059802.jpg);
    background-size: 100% 100%;
}

ul li:nth-of-type(2) {
    background: url(https://upyun.xuanmo.xin/bizhi/20220913235117007246.jpg);
    background-size: 100% 100%;
}

ul li:nth-of-type(3) {
    background: url(https://upyun.xuanmo.xin/bizhi/20220913235114600316.jpg);
    background-size: 100% 100%;
}

ul li:nth-of-type(4) {
    background: url(https://upyun.xuanmo.xin/bizhi/20220120000806959214.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 += '<li></li>'
}
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 展示

https://www.xuanmo.xin/-/html/3d-banner.html

flex小案例展示

共 0 条评论关于 “flex小案例展示”

flex小案例展示

分享本文海报