zoukankan      html  css  js  c++  java
  • CSS3-3D盒子

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>3D动画box</title>
    <style type=text/css>

    .warpper{position:fixed;top:30%;left:40%;perspective:1000px;}
    .cube{
    300px;height:300px;
    transform-style:preserve-3d;/*设置3D环境*/
    }

    .side{
    300px;height:300px;
    background:rgba(255,121,134,0.6);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    border-radius: 50%;
    }

    .side_top{
    300px;height:300px;
    /*background:rgba(255,121,134,0.6);*/
    background-image: url(img/01.png);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    /*border-radius: 50%;*/
    opacity:0.9;
    }

    .side_bottom{
    300px;height:300px;
    /*background:rgba(255,121,134,0.6);*/
    background-image: url(img/02.png);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    /*border-radius: 50%;*/
    opacity: 0.9;
    }
    .side_left{
    300px;height:300px;
    /*background:rgba(255,121,134,0.6);*/
    background-image: url(img/03.png);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    /*border-radius: 50%;*/
    opacity: 0.9;
    }
    .side_right{
    300px;height:300px;
    /*background:rgba(255,121,134,0.6);*/
    background-image: url(img/04.png);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    /*border-radius: 50%;*/
    opacity: 0.9;
    }
    .side_back{
    300px;height:300px;
    /*background:rgba(255,121,134,0.6);*/
    background-image: url(img/05.png);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    /*border-radius: 50%;*/
    opacity: 0.9;
    }
    .side_front{
    300px;height:300px;
    /*background:rgba(255,121,134,0.6);*/
    background-image: url(img/06.png);
    position:absolute;
    font-size:60px;
    color:#fff;
    line-height:300px;
    text-align:center;
    border:1px solid red;
    /*border-radius: 50%;*/
    opacity: 0.7;
    }

    .top{transform:rotateX(90deg) translateZ(150px);}
    .bottom{transform:rotateX(-90deg) translateZ(150px);}
    .left{transform:rotateY(-90deg) translateZ(150px);}
    .right{transform:rotateY(90deg) translateZ(150px);}
    .back{transform:rotateX(180deg) translateZ(150px);}
    .front{transform:rotateY(0deg) translateZ(150px);}

    </style>
    </head>
    <body>
    <div class="warpper">
    <div class="cube" id="cube">
    <div class="top side_top">1</div>
    <div class="bottom side_bottom">2</div>
    <div class="left side_left">3</div>
    <div class="right side_right">4</div>
    <div class="back side_back">5</div>
    <div class="front side_front">6</div>
    </div>
    </div>



    <!--<script type="text/javascript" src="js/niannian-kuku.js"></script>-->
    <script type="text/javascript">
    var cubeDom = document.getElementById("cube");
    var y = 0;
    setInterval(function(){
    if(y>360){
    y=0;
    }
    y += 5;

    cubeDom.style.transform = "rotateY("+y+"deg) rotateX("+y+"deg)";
    //document.body.style.background = kuku.RandomColor();
    //document.body.innerHTML = kuku.RandomNmb(1,11);
    },100);

    </script>
    </body>
    </html>

  • 相关阅读:
    max 关于面数的脚本,这个在帮助里面还有很多的茶壶什么的 还有面数显示颜色什么的, 有需要时 学习下。
    完整的对齐脚本
    拾取可用于鼠标定位。
    amax 这个函数叫我好找啊, 我一生都不会忘了
    Collections > Collection Types > ObjectSet Values max 删除清除选择的路径
    是个视屏网站。
    自动对齐核心已经完成。这个不错。
    自动对齐中的一段代码。
    对齐成功。
    pickObject count:#multiple forceListenerFocus:false 拾取多个的脚本,这个很是有用。
  • 原文地址:https://www.cnblogs.com/dingzhaoqiang/p/4745736.html
Copyright © 2011-2022 走看看