demo——06弹性和制作骰子

2022-10-24 14:50:37
<!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属性中属性值的顺序会直接影响到效果的出现；
码农公寓

相关文章
