js实现三维房间404页面效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：js实现三维房间404页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8">
    <title>Hello 404!.</title>
<style>
    
 ::-webkit-scrollbar {
    width: 5px;
    /*对垂直流动条有效*/
    height: 5px;
    /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/

::-webkit-scrollbar-track {
    /* background-color: rgba(50, 50, 50, 0.1); */
    background-color: transparent;
    border-radius: 5px;
}
/*定义滑块颜色、内阴影及圆角*/

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
}
/*定义两端按钮的样式*/

::-webkit-scrollbar-button {
    background-color: transparent;
}
/*定义右下角汇合处的样式*/

::-webkit-scrollbar-corner {
    background: transparent;
}

html {
   touch-action: none;
   content-zooming: none;
}

body {
   position: fixed;
   margin: 0;
   padding: 0;
   background: #000;
   width: 100%;
   height: 100%;
   color: white;
}

#screen {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #aaa;
   user-select: none;
   overflow: hidden;
}

#scene {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   transform: translateZ(1000px);
   -webkit-transform: translateZ(1000px);
}

#scene .side {
   position: absolute;
   visibility: hidden;
   margin: -300px -500px;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   display: inline-block;
   width: 1000px;
   height: 600px;
   cursor: move;
   background: #111 url(//repo.bfw.wiki/bfwrepo/image/61505120be212.png);
   background-size: cover;
}
#scene .top, 
#scene .bottom{
   margin: -500px -500px!important;
   width: 1000px!important;
   height: 1000px!important;
}
#scene .bottom{
   background: #111 url(//repo.bfw.wiki/bfwrepo/image/61505147d39b3.png);
   background-size: cover;
   text-align: center;
}
#scene .top{
   background: #111 url(//repo.bfw.wiki/bfwrepo/image/61505136929a0.png);
   background-size: cover;
}
.bottom .head{
   text-align: center;
}
.bottom .head img{
   width: 120px;
   border-radius: 20px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.8);
}
.bottom .user{
   margin-top: 100px;
   background-color: rgba(0,0,0,0.3);
   display: inline-block;
   border-radius: 20px;
   padding: 80px 100px;
}
.bottom .name{
   text-align: center;
   font-size:32px;
   margin-top: 20px;
   text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}
.bottom .bio{
   text-align: center;
   font-size:14px;
   margin-top: 5px;
   text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}
.bottom .copyright{
   text-align: center;
   font-size:14px;
   margin-top: 5px;
   text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}
.bottom .footer{
   position: absolute;
   top:200px;
   left:50px;
   right: 50px;
   text-align: center;
}
.front .main{
   position: absolute;
   left:0;
   right: 0;
   top: 30%;
   color: yellow;
   text-align: center;
   text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.front .title{
   font-size: 32px;
}
.front .tips{
   color: #aaa;
}
.front .copyright{
   position: absolute;
   right: 50px;
   bottom: 50px;
   font-size: 12px;
   color: #999;
}
.main{
   position: absolute;
   left:0;
   right: 0;
   top: 30%;
   color: yellow;
   text-align: center;
   text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.main .iconfont{
   font-size: 64px;
   display: block;
}
.main .link{
   cursor: pointer;
   display: inline-block;
}
</style>
</head>

<body>
    <div id="app">
        <div id="screen">
            <div id="scene">
                <div class="side front" data-transform="translateZ(-500px)">
                    <div class="main">
                        <div class="title">404 - Not found!</div>
                        <div class="tips">
                            你访问的资源没有找到,你可以尝试访问这边的一些推荐服务
                        </div>
                    </div>
                    <div class="copyright">eveningwater.com</div>
                </div>
                <div class="side right" data-transform="rotateY(-90deg) translateZ(-500px)">
                    <div class="main">
                        <div class="link" data-url="https://gitee.com/eveningwater">
                            <i class="iconfont icon-gitee"></i>
                            Gitee.com/eveningwater
                        </div>
                    </div>
                </div>
                <div class="side left" data-transform="rotateY(90deg)  translateZ(-500px)">
                    <div class="main">
                        <div class="link" data-url="https://github.com/eveningwater">
                            <i class="iconfont icon-github"></i>
                            Github.com/eveningwater
                        </div>
                    </div>
                </div>
                <div class="side back" data-transform="rotateY(180deg) translateZ(-500px)">
                    <div class="main">
                        <div class="link" data-url="https://www.eveningwater.com/my-web-projects/">
                            <img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" />
                        </div>
                    </div>
                </div>
                <div class="side top" data-transform="rotateX(-90deg) translateZ(-300px)"></div>
                <div class="side bottom" data-transform="rotateX(90deg) translateZ(-300px)">
                    <div class="footer">
                        <div class="text">eveningwater.com</div>
                        <div class="copyright">@copyright eveningwater</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var three = three || {
    screen: {
        elem: null,
        callback: null,
        width: 0,
        height: 0,
        left: 0,
        top: 0,
        init: function(id, callback, initRes) {
            this.elem = document.getElementById(id);
            this.callback = callback || null;
            window.addEventListener('resize', function() { this.resize(); }.bind(this), false);
            this.elem.onselectstart = function() { return false; }
            this.elem.ondrag = function() { return false; }
            initRes && this.resize();
            return this;
        },
        resize: function() {
            let o = this.elem;
            this.width = o.offsetWidth;
            this.height = o.offsetHeight;
            for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
                this.left += o.offsetLeft;
                this.top += o.offsetTop;
            }
            this.callback && this.callback();
        },
        pointer: {
            screen: null,
            elem: null,
            callback: null,
            pos: { x: 0, y: 0 },
            mov: { x: 0, y: 0 },
            drag: { x: 0, y: 0 },
            start: { x: 0, y: 0 },
            end: { x: 0, y: 0 },
            active: false,
.........完整代码请登录后点击上方下载按钮下载查看