css3拆解正方体动画效果

最新推荐文章于 2022-12-02 16:50:38 发布

哈哈西西）

最新推荐文章于 2022-12-02 16:50:38 发布

阅读量624

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/SugarXiXixi/article/details/108641273

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

实现效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、注意事项

1 元素旋转跟圆点 transform-origin: 50% 100%;有关

2 transfrom 旋转跟属性的值得顺序有关

3要借助辅助盒子实现后和上一起旋转

二、使用步骤

1.html

代码如下（示例）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正方体</title>
        <style type="text/css">
        </style>
        <link rel="stylesheet" type="text/css" href="../css/cfzft.css"/>
    </head>
    <body>
        <div class="bigbox">
            <!--辅助盒子-->
            <div class="fzbox">
                <div class="top">上</div>
                <div class="behind">后</div>
            </div>
            
            <div class="bottom">下</div>
            <div class="left">左</div>
            <div class="right">右</div>
            <div class="front">前</div>
            
        </div>
    </body>
</html>

2.css

代码如下（示例）：

.bigbox {
    width: 300px;
    height: 300px;
    /*border: 1px solid black;*/
    margin: 200px auto;
    /*perspective: 1800px;*/
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    transform: rotateX(-45deg) rotateY(45deg);
    /*animation: box-run 3s linear alternate infinite;*/
}

@keyframes box-run {
    0% {
        transform: rotateX(45deg) rotateY(-45deg);
    }
    100% {
        transform: rotateX(405deg) rotateY(-405deg);
    }
}

.bigbox div {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    opacity: 1;
    text-align: center;
    line-height: 300px;
    font-size: 25px
}
.fzbox{
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    border: 1px black solid;
    transform: translateZ(-150px) ;
   animation: fzbox-run 1s linear alternate;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    
}
@keyframes fzbox-run{
    0%{
        transform: translateZ(-150px) ;
    }
    100%{
        transform: translateZ(-150px) rotateX(90deg);
    }
}

.top {
    background: salmon;
    transform-origin: 50% 0%;
    transform: rotateX(90deg) ;

    animation: top-run 1s linear alternate;
    animation-fill-mode: forwards;
    animation-delay: 4s;

}
@keyframes top-run{
    0%{
    transform: rotateX(90deg);
        
    }
    100%{
    transform: rotateX(90deg) rotateX(90deg);
        
    }
}
.behind {
    background: aquamarine;
    
    
    animation: behind-run 1s linear alternate;
    animation-fill-mode: forwards;
}
.bottom {
    background: silver;
    transform: rotateX(-90deg) translateZ(150px);
}

.left {
    background: saddlebrown;
    transform-origin: 50% 100%;
    transform: rotateY(-90deg) translateZ(150px) ;
    animation: left-run 1s linear alternate;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes left-run{
    0%{
    transform: rotateY(-90deg) translateZ(150px);
        
    }
    
    100%{
    transform:rotateY(-90deg) translateZ(150px) rotateX(-90deg) ;
        
    }
}

.right {
    background: olive;
    transform-origin: 50% 100%;
    
    transform: rotateY(-90deg) translateZ(-150px)  ;
    animation: right-run 1s linear 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    
    
}
@keyframes right-run{
    0%{
    transform: rotateY(-90deg) translateZ(-150px);
        
    }
    
    100%{
    transform:rotateY(-90deg) translateZ(-150px) rotateX(90deg) ;
        
    }
}

.front {
    transform-origin: 50% 100%;
    background: #ADFF2F;
    transform: translateZ(150px) ;
    animation: front-run 1s 1 linear ;
    animation-fill-mode: forwards;
    
    

}
@keyframes front-run{
    0%{
    transform: translateZ(150px);
        
    }
    
    100%{
    transform:translateZ(150px) rotateX(-90deg) ;
        
    }
}