弹性布局 3d骰子

最新推荐文章于 2024-07-23 16:18:27 发布

m0_64333610

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量253

点赞数 1

文章标签： 3d css css3

本文链接：https://blog.csdn.net/m0_64333610/article/details/122277560

版权

简单运用练习弹性盒子布局3d骰子

多练习以下是我做的骰子有空可自行琢磨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .all {
            margin: 300px auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            position: relative;
            transition: all 3s;
        }
        .all:hover {
            transform: translateY(-300px) rotateZ(360deg) rotateY(360deg) rotateX(360deg);
        }
        div {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
            border-radius: 20px;
        }
        /* 第一面一点 */
        .one {
            width: 200px;
            height: 200px;
            background-color: black;
            transform: translateZ(100px);
            display: flex;
            justify-content: center;
            align-items: center;
        }
         /* 第二面二点 */
        .two {
            width: 200px;
            height: 200px;
            background-color: black;
            transform: translateZ(-100px);
            display: flex;
            justify-content: space-around;
        }
        .two p:nth-child(2) {
            align-self: flex-end;
        }
         /* 第三面三点 */
        .three {
            width: 200px;
            height: 200px;
            background-color: black;
            transform: rotateX(90deg) translateZ(100px);
            display: flex;
            justify-content: space-between;
        }
        .three p:nth-child(2) {
            align-self: center;
        }
        .three p:nth-child(3) {
            align-self: flex-end;
        }
        /* 第四面四点 */
        .four {
            width: 200px;
            height: 200px;
            background-color: black;
            transform: rotateX(-90deg) translateZ(100px);
            display: flex;
            justify-content: space-around;
        }
        .four_first {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .four_two {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        /* 第五面五点 */
        .five {
            width: 200px;
            height: 200px;
            background-color: black;
            transform: rotateY(90deg) translateZ(100px);
            display: flex;
            justify-content: space-around;
        }
        .center {
            display: flex;
            align-self: center;
        }
        .five_first,.five_two {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        /* 第六面六点 */
        .six {
            width:200px;
            height: 200px;
            background-color: black;
            transform: rotateY(-90deg) translateZ(100px);
            display: flex;
            justify-content: space-around;
        }
        .six_first, .six_two {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        /* 点样式 */
        p {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <header class="all">
        <div class="one">
            <p></p>
        </div>
        <div class="two">
            <p></p>
            <p></p>
        </div>
        <div class="three">
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="four">
            <nav class="four_first">
                <p></p>
                <p></p>
            </nav>
            <nav class="four_two">
                <p></p>
                <p></p>
            </nav>
        </div>
        <div class="five">
            <nav class="five_first">
                <p></p>
                <p></p>
            </nav>
            <nav class="center">
                <p></p>
            </nav>
            <nav class="five_two">
                <p></p>
                <p></p>
            </nav>
        </div>
        <div class="six">
            <nav class="six_first">
                <p></p>
                <p></p>
                <p></p>
            </nav>
            <nav class="six_two">
                <p></p>
                <p></p>
                <p></p>
            </nav>
        </div>
    </header>
</body>
</html>