css实现小猪佩奇骰子效果

最新推荐文章于 2024-03-01 16:16:38 发布

money_monkey

最新推荐文章于 2024-03-01 16:16:38 发布

阅读量193

点赞数 3

分类专栏：前端代码设计文章标签： css html 前端

本文链接：https://blog.csdn.net/money_monkey/article/details/126043799

版权

前端代码设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天来整个活，做个小猪佩奇骰子，借鉴了一些数据，大家多多包涵~~~

先上图：

我们再来看看代码：

    <style>
        body {
            /* 视图 */
            perspective: 1000px;
        }

        img {
            width: 100px;
            height: 100px;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            /* 设置3d变形效果 */
            transform-style: preserve-3d;
            animation: rotate 2s infinite linear;
        }

        .box>div {
            width: 100px;
            height: 100px;
            position: absolute;
        }

        .box1 {
            transform: rotateY(90deg) translateZ(50px);
        }

        .box2 {
            
            transform: rotateY(-90deg) translateZ(50px);
        }

        .box3 {
            
            transform: rotateX(90deg) translateZ(50px);
        }

        .box4 {
            
            transform: rotateX(-90deg) translateZ(50px);
        }

        .box5 {
            
            transform: rotateZ(90deg) translateZ(50px);
        }

        .box6 {
            
            transform: rotateZ(0deg) translateZ(50px);
        }

        @keyframes rotate {
            from {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }

            to {
                transform: rotateX(1turn) rotateY(1turn) rotateZ(0);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"><img src="./img/1.jpeg" alt=""></div>
        <div class="box2"><img src="./img/2.jpeg" alt=""></div>
        <div class="box3"><img src="./img/3.jpeg" alt=""></div>
        <div class="box4"><img src="./img/4.jpeg" alt=""></div>
        <div class="box5"><img src="./img/5.jpeg" alt=""></div>
        <div class="box6"><img src="./img/6.jpeg" alt=""></div>
    </div>
</body

其中的视图是开启3d的重要样式，还有父元素的transform-style: preserve-3d;也是让子元素开启3d的必要条件，大家一定要记得写~~，其他都是基本样式。