CSS 3D动画大小可开合正方体

淡淡的烟草味﹌ 2023-10-03 05:40 19阅读 0赞

### 先看一下效果动态图 ###

![在这里插入图片描述][6e58a5c03afb4272b52045177603c497.gif_pic_center]

### 代码 ###

#### HTML ####

HTML中的图片来自百度图片，大家可以直接替换成自己喜欢的图片。，主要的是CSS的导入不要弄错了，不然不会显示出来效果。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS动画</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    
    <body>
        <div class="main">
            <div class="cubebox">
                <ul class="cube">
                    <li>
                        <img src="https://img2.baidu.com/it/u=2265174136,3258085177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312" alt="">
                    </li>
                    <li>
                        <img src="https://img0.baidu.com/it/u=3590272806,4057802992&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=468" alt="">
                    </li>
                    <li>
                        <img src="https://img0.baidu.com/it/u=2684195388,1892017431&fm=253&fmt=auto&app=120&f=JPEG?w=786&h=494" alt="">
                    </li>
                    <li>
                        <img src="https://img1.baidu.com/it/u=637136511,2252791011&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281" alt="">
                    </li>
                    <li>
                        <img src="https://img2.baidu.com/it/u=860939803,3087392249&fm=253&fmt=auto&app=120&f=JPEG?w=820&h=512" alt="">
                    </li>
                    <li>
                        <img src="https://img2.baidu.com/it/u=4169107668,201424208&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
                    </li>
                </ul>
    
                
                <ul class="cube bigcube">
                    <li>
                        <img src="https://img2.baidu.com/it/u=4169107668,201424208&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
                    </li>
                    <li>
                        <img src="https://img2.baidu.com/it/u=860939803,3087392249&fm=253&fmt=auto&app=120&f=JPEG?w=820&h=512" alt="">
                    </li>
                    <li>
                        <img src="https://img1.baidu.com/it/u=637136511,2252791011&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281" alt="">
                    </li>
                    <li>
                        <img src="https://img0.baidu.com/it/u=2684195388,1892017431&fm=253&fmt=auto&app=120&f=JPEG?w=786&h=494" alt="">
                    </li>
                    <li>
                        <img src="https://img0.baidu.com/it/u=3590272806,4057802992&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=468" alt="">
                    </li>
                    <li>
                        <img src="https://img2.baidu.com/it/u=2265174136,3258085177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312" alt="">
                    </li>
                </ul>
            </div>
        </div>
       
    
    </body>
    
    </html>

#### CSS ####

CSS文件与HTML文件为同级目录，并且命名为**style.css**，背景图片（background)的图片这里没有使用网络上的图片，大家可以也在同级目录下保存一张图片，命名为**bg.png**即可，也可以通过控制CSS属性**animation**的秒数来控制转动速度和**transition**的秒数来控制正方体的分开速度

*{
        
        padding: 0;
        margin: 0;
        list-style: none;
    }
    html,body{
        
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url(./bg.png)no-repeat;
        background-size: 100%;
    }
    
    .main{
        
        width: 100%;
        height: 100%;
        perspective: 800px;
    }
    .cubebox{
        
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
        transform-style: preserve-3d;
    }
    .cube{
        
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
        transform-style: preserve-3d;
        transform: rotateX(-10deg) rotateY(45deg);
        animation: move 8s linear infinite;
    }
    .bg{
        
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    .cube li{
        
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 1s ease-in-out;
    }
    .cube li img{
        
        display: block;
        width: 100%;
        height: 100%;
        /* border-radius: 50%; */
        opacity:0.8;
        
    }
    .bigcube li img{
        
        opacity: 1;
    }
    .cube li:nth-child(1){
        
        transform: rotateX(0deg) translateZ(50px);
    
    }
    .cube li:nth-child(2){
        
        transform: rotateX(180deg) translateZ(50px) rotateZ(180deg);
        
    }
    .cube li:nth-child(3){
        
        transform: rotateX(-90deg) translateZ(50px);
        
    }
    .cube li:nth-child(4){
        
        transform: rotateX(90deg) translateZ(50px);
        
    }
    .cube li:nth-child(5){
        
        transform: rotateY(-90deg) translateZ(50px) ;
        
    }
    .cube li:nth-child(6){
        
        transform: rotateY(90deg) translateZ(50px);
        
    }
    .bigcube{
        
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
    }
    
    .bigcube li:nth-child(1){
        
        transform: rotateX(0deg) translateZ(100px);
    
    }
    .bigcube li:nth-child(2){
        
        transform: rotateX(180deg) translateZ(100px)  rotateZ(180deg) ;
        
    }
    .bigcube li:nth-child(3){
        
        transform: rotateX(-90deg) translateZ(100px);
        
    }
    .bigcube li:nth-child(4){
        
        transform: rotateX(90deg) translateZ(100px);
        
    }
    .bigcube li:nth-child(5){
        
        transform: rotateY(-90deg) translateZ(100px) ;
        
    }
    .bigcube li:nth-child(6){
        
        transform: rotateY(90deg) translateZ(100px);
        
    }
    
    @keyframes move{
        
        0%{
        
            transform: rotateX(-13deg) rotateY(0deg);
        }
        100%{
        
            transform: rotateX(-13deg) rotateY(360deg);
        }
    }
    
    .bigcube:hover li:nth-child(1){
        
        transform: rotateX(0deg) translateZ(200px) scale(1.1);
    
    }
    .bigcube:hover li:nth-child(2){
        
        transform: rotateX(180deg) translateZ(200px)  rotateZ(180deg)   scale(1.1);
        
    }
    .bigcube:hover li:nth-child(3){
        
        transform: rotateX(-90deg) translateZ(200px) scale(1.1);
        
    }
    .bigcube:hover li:nth-child(4){
        
        transform: rotateX(90deg) translateZ(200px) scale(1.1);
        
    }
    .bigcube:hover li:nth-child(5){
        
        transform: rotateY(-90deg) translateZ(200px) scale(1.1);
        
    }
    .bigcube:hover li:nth-child(6){
        
        transform: rotateY(90deg) translateZ(200px) scale(1.1);
        
    }

### 最后 ###

这里面采集得图片只有背景的是来自本地的，其它的是来自网页，代码可直接复制使用。可以换成你喜欢的图片，当然也可以添加一些文字描述在里面，看各位小伙伴的需要了。本次CSS的分享到此结束，感谢观看

[6e58a5c03afb4272b52045177603c497.gif_pic_center]: https://img-blog.csdnimg.cn/6e58a5c03afb4272b52045177603c497.gif#pic_center