css3实现立方体

最新推荐文章于 2024-09-21 23:59:03 发布

哒哒哒Q

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量63

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_54089303/article/details/120978642

版权

css代码：

      body{
            perspective: 600px;
        }
        .cube{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            position: relative;
            /* 子元素继承3d效果 */
            transform-style: preserve-3d;
            animation:  ani 2s linear infinite;

        }
        .cube>div{
            position: absolute;
            width: 100%;
            height: 100%;
            /* box-shadow: inset 0 0 15px lightgreen; */
            font-size: 30px;
            text-align: center;
            line-height: 30px;
            letter-spacing: 20px;
        }
        .front{
            transform: translateZ(50px);
            background-color: red;
        }
        .back{
            transform: translateZ(-50px);
            background-color: yellow;
        }
        .right{
            transform:translateX(50px) rotateY(90deg);
            background-color: blue;
        }
        .left{
            transform: translateX(-50px) rotateY(90deg);
            background-color: green;
        }
        .top{
            transform: translateY(50px) rotateX(90deg);
            background-color: white;
            /* background-image: url(../../图片/jpg.jpg); */
            background-position: 100% 100%;
        }
        .bottom{
            transform: translateY(-50px) rotateX(90deg);
            background-color: pink;
        }

        @keyframes ani{
            0%{
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

html代码

    <div class="cube c1">
        <div class="front">.</div>
        <div class="back">..</div>
        <div class="right">...</div>
        <div class="left">.. <br>..</div>
        <div class="top">.. <br> . <br>..</div>
        <div class="bottom">.. <br> .. <br> ..</div>
    </div>