lodash+jquery实现三维棋牌效果代码-html代码-BFW代码库

lodash+jquery实现三维棋牌效果代码

代码语言：html

所属分类：三维

代码描述：lodash+jquery实现三维棋牌效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          font-family: Helvetica, sans-serif;
          font-size: 24px;
        }
        
        .controls {
          background-color: white;
          z-index: 2;
          position: absolute;
          transform: none;
          top: 0;
          left: 0;
          padding: 10px 0 0 10px;
          width: 400px;
        }
        .controls input {
          width: 85%;
        }
        
        .desk {
          transform: perspective(1000px) rotateX(70deg) rotateZ(25deg) translateX(15px);
          transform-style: preserve-3d;
          width: 800px;
        }
        
        img {
          width: 800px;
          height: 600px;
        }
        
        .pos {
          position: absolute;
          left: 300px;
          top: 150px;
          transform: translate3d(0, 0, -180px);
          transform-style: preserve-3d;
        }
        
        .cube {
          position: relative;
          height: 300px;
          width: 300px;
          perspective: 600px;
          transform-style: preserve-3d;
        }
        
        .face {
          position: absolute;
          width: inherit;
          height: inherit;
          background: #333333;
        }
        
        #grid {
          transform: translate3d(0, 0, 150px);
        }
        
        .front {
          transform: rotateX(-90deg) translate3d(0, -140px, 290px);
          height: 20px;
        }
        
        .side {
          transform: rotateY(90deg) rotateZ(90deg) translate3d(140px, 140px, 150px);
          height: 20px;
          border-top: 2px solid black;
        }
        
        .square {
          float: left;
          width: 60px;
          height: 60px;
          background-color: white;
          opacity: 0.7;
        }
        
        .square:nth-child(2n) {
          background-color: black;
        }
    </style>


</head>

<body>
    <div class="controls">Click and drag board around

    </div>
    <div class="desk">
        <img src="//repo.bfw.wiki/bfwrepo/image/6032e554eeb71.png" />
        <div class="pos">
            <div class="cube">
                <div id="grid" class="face"></div>
                <div class="front face"></div>
                <div class="side face"></div>
            </div>

        </div>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
    <script>
        let $squares = (()=>{
              let sq = [];
              for(let i = 0; i < 25;i++) {
                sq.push($('<div class="square"> </div>'));
              }
              return sq;
            })();
            $("#grid").html($squares);
            
            (()=> {
     .........完整代码请登录后点击上方下载按钮下载查看