zoukankan      html  css  js  c++  java
  • 立体骰子(css3和js)

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src='jquery-3.0.0.min.js'></script>
        <style>
            body{
                perspective: 500px;
                background-color: skyblue;
            }
            #demo {
                 200px;
                height: 200px;
                margin: 100px auto;
                position: relative;
                transform-style: preserve-3d;
                transition: all 5s;
            }
            #demo .item{
                 100%;
                height: 100%;
                list-style: none;
                position: absolute;
                padding: 0;
                margin: 0;
                display: flex;
                border-radius: 30px;
                background-color: whitesmoke;
            }
            li{
                 30px;
                height: 30px;
                border-radius: 50%;
                background-color: red;
                margin: 5px;
            }
            .item:nth-child(1){
                align-items: center;
                justify-content: center;
                transform: rotateY(0deg) translateZ(100px);
            }
            .item:nth-child(1) li{
                 50px;
                height: 50px;
            }
            .item:nth-child(2){
                justify-content: space-between;
                transform: rotateY(180deg) translateZ(100px);
            }
            .item:nth-child(2) li{
                 40px;
                height: 40px;
            }
            .item:nth-child(2) li:nth-child(2){
                align-self: flex-end;
            }
            .item:nth-child(3){
                justify-content: space-between;
                transform: rotateY(90deg) translateZ(100px);
            }
            .item:nth-child(3) li{
                 35px;
                height: 35px;
            }
            .item:nth-child(3) li:nth-child(3){
                align-self: flex-end;
            }
            .item:nth-child(3) li:nth-child(2){
                align-self: center;
                justify-content: center;
            }
            .item:nth-child(4) {
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: space-between;
                transform: rotateY(-90deg) translateZ(100px);
            }
            .item:nth-child(4) li{
                 35px;
                height: 35px;
                margin: 20px;
            }
            .item:nth-child(5){
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: space-between;
                transform: rotateX(90deg) translateZ(100px);
            }
            .item:nth-child(5) li{
                margin: 8px 15px;
            }
            .item:nth-child(5) li:nth-child(2){
                margin-top: 85px;
            }
            .item:nth-child(6){
                flex-wrap: wrap;
                flex-direction: column;
                justify-content: space-between;
                align-content: space-between;
                transform: rotateX(-90deg) translateZ(100px);
            }
            .item:nth-child(6) li{
                margin: 18px 20px;
            }
            input{
                display: block;
                 50px;
                height: 40px;
                margin: 0 auto;
            }
        </style>
        <script>
            $(function () {
                $("#btn").click(function () {
                    var x = parseInt(Math.random()*3600);
                    var y = parseInt(Math.random()*3600);
                    $("#demo").css({ transform:'rotateX('+x+'deg) rotateY('+y+'deg)'})
                })
            })
        </script>
    </head>
    <body>
    <div id="demo">
        <ul class="item">
            <li></li>
        </ul>
        <ul class="item">
            <li></li>
            <li></li>
        </ul>
        <ul class="item">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="item">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="item">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="item">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <input type="button" id="btn" value="开始"/>
    </body>
    </html>
  • 相关阅读:
    面向对象---工厂模式
    [转]Caffe 安装配置(CentOS + 无GPU)
    [转]Centos6.5+CUDA6.5+caffe安装配置及可能遇到问题解答
    [转]Caffe安装过程记录(CentOS,无独立显卡,无GPU)
    [转]LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别
    [转]centos 6.5安装caffe
    [转]CentOS编译安装GIMP
    [转]Snappy压缩库安装和使用之一
    [转]拍照怎么搜题?(下)
    [转]拍照怎么搜题?(上)
  • 原文地址:https://www.cnblogs.com/ch-ching/p/6435889.html
Copyright © 2011-2022 走看看