码迷,mamicode.com
首页 > 其他好文 > 详细

demo——06弹性和制作骰子

时间:2016-07-01 18:11:29      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        body{
            background-color: skyblue;
        }
            .main{
                width: 700px;
                height: 700px;
                margin: 0 auto;
                border: 1px solid #FFCCCC;
            }
            #dice{
                width: 300px;
                height: 300px;
                /*background: #0bd;*/
                margin: 200px auto;
                position: relative;
                transform-style: preserve-3d;
                animation: run 5s infinite linear;
            }
            .wall{
                width: 300px;
                height: 300px;
                position: absolute;
                display: flex;
                background: rgba(255,255,255,1);
                border: 1px solid #000;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
            }
            .dot{
                width: 50px;
                height: 50px;
                background: #000;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                border-radius: 100px;
            }
            #one{
                justify-content: center;
                align-items: center;
                -webkit-transform: translateZ(150px);
                -moz-transform: translateZ(150px);
                -ms-transform: translateZ(150px);
                -o-transform: translateZ(150px);
                transform: translateZ(150px);
            }
            #one .dot{
                width: 100px;
                height: 100px;
            }
            #two{
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                -webkit-transform: rotateY(90deg) translateZ(150px);
                -moz-transform: rotateY(90deg) translateZ(150px);
                -ms-transform: rotateY(90deg) translateZ(150px);
                -o-transform: rotateY(90deg) translateZ(150px);
                transform: rotateY(90deg) translateZ(150px);
            }
            #two .dot{
                width: 100px;
                height: 100px;
            }
            #three{
                -webkit-transform: translateZ(-150px);
                -moz-transform: translateZ(-150px);
                -ms-transform: translateZ(-150px);
                -o-transform: translateZ(-150px);
                transform: translateZ(-150px);
            }
            #three .d{
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                -webkit-transform: rotateZ(45deg);
                -moz-transform: rotateZ(45deg);
                -ms-transform: rotateZ(45deg);
                -o-transform: rotateZ(45deg);
                transform: rotateZ(45deg);
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            #four{
                -webkit-transform: rotateY(90deg) translateZ(-150px);
                -moz-transform: rotateY(90deg) translateZ(-150px);
                -ms-transform: rotateY(90deg) translateZ(-150px);
                -o-transform: rotateY(90deg) translateZ(-150px);
                transform: rotateY(90deg) translateZ(-150px);
            }
            #four .up,
            #four .down{
                margin-top: 75px;
                display: flex;
                width: 150px;
                height: 150px;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            #five{
                justify-content: center;
                align-items: center;
                -webkit-transform: rotateX(90deg) translateZ(150px);
                -moz-transform: rotateX(90deg) translateZ(150px);
                -ms-transform: rotateX(90deg) translateZ(150px);
                -o-transform: rotateX(90deg) translateZ(150px);
                transform: rotateX(90deg) translateZ(150px);
            }
            #five .up,
            #five .down{
                display: flex;
                width: 120px;
                height: 150px;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            #six{
                -webkit-transform: rotateX(90deg) translateZ(-150px);
                -moz-transform: rotateX(90deg) translateZ(-150px);
                -ms-transform: rotateX(90deg) translateZ(-150px);
                -o-transform: rotateX(90deg) translateZ(-150px);
                transform: rotateX(90deg) translateZ(-150px);
            }
            #six .up,
            #six .down{
                display: flex;
                width: 150px;
                height: 300px;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }
            @keyframes run{
                from{
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div id="dice">
                <div id="one" class="wall">
                    <div class="dot"></div>
                </div>
                <div id="two" class="wall">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div id="three" class="wall">
                    <div class="d">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
                <div id="four" class="wall">
                    <div class="up">
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                    <div class="down">
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
                <div id="five" class="wall">
                    <div class="up">
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                    <div class="dot"></div>
                    <div class="down">
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
                <div id="six" class="wall">
                    <div class="up">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                    <div class="down">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

注意:在transform属性中属性值的顺序会直接影响到效果的出现;

demo——06弹性和制作骰子

标签:

原文地址:http://www.cnblogs.com/wmwPro/p/5633630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!