demo——06弹性和制作骰子

Posted vmanas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了demo——06弹性和制作骰子相关的知识,希望对你有一定的参考价值。

<!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弹性和制作骰子的主要内容,如果未能解决你的问题,请参考以下文章

CSS3--Flex弹性盒子布局: 实例篇-骰子布局

弹性盒子练习(骰子)

弹性盒子之骰子六面

CSS3 flex弹性布局重点

制作骰子动画&指定投掷数字

CSS3--Flex弹性盒子布局:弹性布局和传统布局响应对比