css实现立体骰子

原创已于 2024-10-28 15:04:58 修改 · 329 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

于 2024-10-28 10:52:33 首次发布

css3 使用animation，transiform实现滚动骰子
在这里插入图片描述

css骰子

    <style>
        .test {
            width: 80px;
            height: 80px;
            position: relative;
            transform-style: preserve-3d;
            animation: move 2s linear 0s infinite alternate;
        }
        .up,
        .down,
        .left,
        .right,
        .forwards,
        .back {
            width: 100%;
            height: 100%;
            display: grid;
            align-content: space-evenly;
            justify-items: center;
            position: absolute;
            font-size: 40px;
            border-radius: 20px;
            border: 2px solid gray;
            background-color: #fff;
        }
        .up {
            transform: rotateX(90deg) translateZ(50px);
        }
        .down {
            transform: rotateX(-90deg) translateZ(50px);
            grid-template-columns: repeat(3, 1fr);
        }
        .left {
            transform: rotateY(90deg) translateZ(50px);
        }
        .right {
            transform: rotateY(-90deg) translateZ(50px);
            grid-template-columns: repeat(2,1fr);
        }
        .forwards {
            transform: translateZ(50px);
        }
        .back {
            transform: translateZ(-50px);
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            align-items: center;
        }
        .up .item,
        .forwards .item:nth-child(2) {
            background-color: red;
        }
        .back .item:nth-child(3){
            grid-area: 1/2/3/3 ;
            
            background-color: red;
        }
        @keyframes move {
            0% {
                transform: rotateX(-90deg) rotateY(-90deg);
            }
            25% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: rotateX(90deg) rotateY(90deg);
            }
            75% {
                transform: rotateX(180deg) rotateY(180deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .item {
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
        }
    </style>
<body>
    <div class="test">
        <div class="up">
            <span class="item"></span>
        </div>
        <div class="down">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="left">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="right">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="forwards">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="back">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>
</body>