2021-07-03

最新推荐文章于 2024-09-06 09:38:49 发布

In NauHix

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量103

点赞数 1

文章标签： CSS3 3D变换动画交互设计魔方

原文链接：https://www.html5tricks.com/demo/css3-shine-cube/index.html

版权

3D魔方

<style>
        body{
            background-color: black;
            position: relative;
            transform-style: preserve-3d;
            perspective: 3000px;
        }
        /* *{
            margin: auto;
            padding: auto;
        } */
        .box_1{
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            position: absolute;
            left: 300px;
            top: 150px;
            transform:rotateX(90deg) rotateY(90deg);
            animation: move 5s 0s linear infinite;
        }
        .box{
            width: 97px;
            height: 97px;
            border-radius: 50%;
            border: 3px solid white;
            position: absolute;
            left: 0;
            top: 0;
        }
        .one{
            transform:translateZ(150px) ;
        }
         .two{
            transform:translateZ(-150px);
        } 
        .three{
            transform:translateX(150px) rotateY(90deg);
        }
        .four{
            transform:translateX(-150px) rotateY(90deg);
        }
        .five{
            transform:translateY(-150px) rotateX(-90deg);
        }
        .six{
            transform:translateY(150px) rotateX(-90deg);
        }
        .box_1:hover .one{
            background-color:rgb(250, 4, 4) ;
            box-shadow: 0px 0px 150px 0px rgb(250, 4, 4,0.4) ;
        }
        .box_1:hover .two{
            background-color: rgba(255, 145, 0, 0.4);
            box-shadow: 0px 0px 150px 0px rgba(255, 145, 0, 0.4);
        }
        .box_1:hover .three{
            background-color: rgba(51, 255, 0, 0.4);
            box-shadow: 0px 0px 150px 0px rgba(51, 255, 0, 0.4);
        }
        .box_1:hover .four{
            background-color: rgba(35, 0, 189, 0.4);
            box-shadow: 0px 0px 150px 0px rgba(35, 0, 189, 0.4);
        }
        .box_1:hover .five{
            background-color: rgba(255, 0, 149, 0.4);
            box-shadow: 0px 0px 150px 0px rgba(255, 0, 149, 0.4);
        }
        .box_1:hover .six{
            background-color: rgba(0, 255, 115, 0.4);
            box-shadow: 0px 0px 150px 0px rgba(0, 255, 115, 0.4);
        }
        @keyframes move{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        } 
    </style>

<body>
    <div class="box_1">
        <div class="box one"></div>
        <div class="box two"></div>
        <div class="box three"></div>
        <div class="box four"></div>
        <div class="box five"></div>
        <div class="box six"></div>
    </div>
</body>

在这里插入图片描述

In NauHix

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-03

3D魔方<style> body{ background-color: black; position: relative; transform-style: preserve-3d; perspective: 3000px; } /* *{ margin: auto; padding: auto;
复制链接

扫一扫