css实现3d正方体旋转

最新推荐文章于 2022-08-04 04:42:07 发布

原创最新推荐文章于 2022-08-04 04:42:07 发布

· 305 阅读

5 ·

版权

文章标签：

#css #html5 #html

笔记专栏收录该内容

6 篇文章

订阅专栏

在这里插入图片描述

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
        /* 背景图片 */
            background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F08%2F20170908233501_rSmCt.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634291823&t=01a87d3496b1080c291f96a46c087df2') no-repeat center;
            background-size: 100%;
        }
        .bj{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transform-style: preserve-3d;
            animation: as 5s linear infinite;
        }
        /* 内部小方块 */
        .a{
            
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: thistle;
            opacity: .5;
            transition: 1s;
        }
        /* 外部大方块 */
        .b{
            /* background: url("b64d2cfd2cc87971a37862f60a50c80.jpg") no-repeat center; */
            background-color: aqua;
            background-size: cover;
            box-shadow: 3px 3px 10px 3px white;
            opacity: 1;
        }
         /* 第一个和第七个div */
        .a:nth-child(1),.a:nth-child(7){
            transform: rotateY(90deg) translateZ(150px);          
        }
        /* 第二个和第八个div */
        .a:nth-child(2),.a:nth-child(8){
            transform: rotateY(-90deg) translateZ(150px);
        }
        /* 第三个和第九个div */
        .a:nth-child(3),.a:nth-child(9){
            transform: translateZ(150px);
        }
        /* 第四个和第十个div */
        .a:nth-child(4),.a:nth-child(10){
            transform: translateZ(-150px);
        }
        .a:nth-child(5),.a:nth-child(11){
            transform: rotateX(90deg) translateZ(150px);
        }
        .a:nth-child(6),.a:nth-child(12){
            transform: rotateX(-90deg) translateZ(150px);
        }
        .bj:hover .a:nth-child(7){
            transform: rotateY(90deg) translateZ(250px);
        }
        .bj:hover .a:nth-child(8){
            transform: rotateY(-90deg) translateZ(250px);
        }
        .bj:hover .a:nth-child(9){
            transform: translateZ(250px);
        }
        .bj:hover .a:nth-child(10){
            transform: translateZ(-250px);
        }
        .bj:hover .a:nth-child(11){
            transform: rotateX(90deg) translateZ(250px);
        }
        .bj:hover .a:nth-child(12){
            transform: rotateX(-90deg) translateZ(250px);
        }
        .bj:hover{
            animation: as2 3s linear infinite;
        }
        .bj:hover .a{
            box-shadow: 5px 5px 6px 6px white;
        }
        @keyframes as {
            0%{
                transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
            }
            100%{
                transform :rotateX(10deg) rotateY(360deg) rotateZ(0deg);
            }
        }
        @keyframes as2 {
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform :rotateX(360deg) rotateY(360deg) ;
            }
        }
    </style>

<body>
    <div class="bj">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a b"></div>
        <div class="a b"></div>
        <div class="a b"></div>
        <div class="a b"></div>
        <div class="a b"></div>
        <div class="a b"></div>
    </div>
</body>