用grid组成骰子并且让骰子旋转

最新推荐文章于 2022-08-01 16:14:02 发布

OrdnAry

最新推荐文章于 2022-08-01 16:14:02 发布

阅读量190

点赞数

分类专栏：学习文章标签： css html

本文链接：https://blog.csdn.net/OrdnAry/article/details/107895942

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .area{grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";}
        .l{float: left;}
        #box{width:300px;height:300px;margin:200px auto;perspective: 200px;display: grid; place-items: center center;
        /* transform-style:preserve-3d; */
        }

        #a{width:100px;height:100px; position: relative;transform-origin: center center -50px;transform-style:preserve-3d;animation: identifier 4s infinite;}
        
        /* #box:hover #a{      
            transform:rotateX(360deg);
        } */
        @keyframes identifier {
            0%{ transform:rotateX(0deg) rotateY(0deg);}
            100%{ transform:rotateX(360deg) rotateY(720deg);}
        }
        #box1{width:100px;height:100px;background-color:red;border-radius:5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;   
            
        }
        #box1 div{width:20px;height:20px;border-radius:50%;background-color: black; grid-area: a5;}

        #box2{width:100px;height:100px;background-color:sandybrown;border-radius:5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
            transform-origin: top;
            transform:rotateX(-90deg);
        }
        #box2 div{width:20px;height:20px;border-radius:50%;background-color: black; }
        #box2 div:nth-child(1){grid-area: a1;justify-self: end;align-self: end;}
        #box2 div:nth-child(2){grid-area: a9;justify-self: start;align-self: start;}

        #box3{width:100px;height:100px;background-color: yellow;border-radius:5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
            position: absolute; top:-100px;left:0;
            transform-origin: bottom;
            transform:rotateX(90deg);
        }
        #box3 div{width:20px;height:20px;border-radius:50%;background-color: black; }
        #box3 div:nth-child(1){grid-area: a1;justify-self: end;align-self: end;}
        #box3 div:nth-child(2){grid-area: a9;justify-self: start;align-self: start;}
        #box3 div:nth-child(3){grid-area: a5;}

        #box4{width:100px;height:100px;background-color:green;border-radius:5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
            position: absolute; top:0;left:-100px;
            transform-origin: right;
            transform:rotateY(-90deg);
        }
        #box4 div{width:20px;height:20px;border-radius:50%;background-color: black; }
        #box4 div:nth-child(1){grid-area: a1;justify-self: end;align-self: end;}
        #box4 div:nth-child(2){grid-area: a3;justify-self: start;align-self: end;}
        #box4 div:nth-child(3){grid-area: a7;justify-self: end;align-self: start;}
        #box4 div:nth-child(4){grid-area: a9;justify-self: start;align-self: start;}

        #box5{width:100px;height:100px;background-color:blue;border-radius:5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
            position: absolute; top:0;left:100px;
            transform-origin: left;
            transform:rotateY(90deg);
        }
        #box5 div{width:20px;height:20px;border-radius:50%;background-color: black; }
        #box5 div:nth-child(1){grid-area: a1;justify-self: end;align-self: end;}
        #box5 div:nth-child(2){grid-area: a3;justify-self: start;align-self: end;}
        #box5 div:nth-child(3){grid-area: a7;justify-self: end;align-self: start;}
        #box5 div:nth-child(4){grid-area: a9;justify-self: start;align-self: start;}
        #box5 div:nth-child(5){grid-area: a5;}

        #box6{width:100px;height:100px;background-color:blueviolet;border-radius:5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
            position: absolute; top:0;left:0;
            transform:translateZ(-100px);
        }
        #box6 div{width:20px;height:20px;border-radius:50%;background-color: black; }
        #box6 div:nth-child(1){grid-area: a1;justify-self: end;align-self: end;}
        #box6 div:nth-child(2){grid-area: a3;justify-self: start;align-self: end;}
        #box6 div:nth-child(3){grid-area: a7;justify-self: end;align-self: start;}
        #box6 div:nth-child(4){grid-area: a9;justify-self: start;align-self: start;}
        #box6 div:nth-child(5){grid-area: a4;justify-self: end;}
        #box6 div:nth-child(6){grid-area: a6;justify-self: start;}       
    </style>
</head>
<body>
    <div id="box">
        <div id="a">
            <div id="box1" class="area">
                <div></div>
            </div>
            <div id="box2" class="area">
                <div></div>
                <div></div>
            </div>
            <div id="box3" class="area">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div id="box4" class="area">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div id="box5" class="area">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div id="box6" class="area">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div> 
    </div>
</body>
</html>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用grid组成骰子并且让骰子旋转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;paddin
复制链接

扫一扫