原创投稿
  1. 创想鸟首页
  2. 用户投稿

如何使用css3实现魔方的动画效果（完整代码）

程序猿 • • 用户投稿

本篇文章给大家带来的内容是关于如何使用css3实现魔方的动画效果（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

                        Document        *{    margin: 0;    padding: 0;    }    .box{    width: 300px;    height: 300px;    margin: 100px auto;    position: relative;    transform-style: preserve-3d;    transform: rotateX(-30deg) rotateY(30deg);    animation: updown 3s linear 3s infinite alternate;    }    @keyframes updown{    0%{    transform: rotateX(-30deg) rotateY(30deg);    }    100%{    transform: rotateX(360deg) rotateY(360deg);    }    }    ul{    list-style: none;    }    .box li{    width: 100px;    height: 100px;    border: 2px solid #fff;    box-sizing: border-box;    float: left;    position: relative;    }    .box>div{    position: absolute;    width: 100%;    height: 100%;    opacity: 0.5    }    .box .front{    /*background-color: deeppink;*/    transform: translateZ(150px);    }    .box .behind{    /*background-color: yellow;*/    transform: translateZ(-150px);    }    .box .left{    /*background-color: greenyellow;*/    transform: rotateY(-90deg) translateZ(150px);    }    .box .right{    /*background-color: red;*/    transform: rotateY(90deg) translateZ(150px);    }    .box .top{    /*background-color: deepskyblue;*/    transform: rotateX(90deg) translateZ(150px);    }    .box .bottom{    /*background-color: purple;*/    transform: rotateX(-90deg) translateZ(150px);    }                
    
    
    
    
    
    
    
            var box = $(".box");    var divs = box.children();    var lisColor = ['deeppink','yellow','greenyellow','red','deepskyblue','purple']    divs.each(function(index,el){    var ul = $("
    ");    for(var i = 0; i < 9; i++){    var li = $("
  • ");    li.css({"backgroundColor":lisColor[index]});    ul.append(li);    }    $(el).append(ul);    });    var lisPosition = [];    for(var i = 0; i < 54; i++){    lisPosition.push(parseInt(Math.random()*350));    }    $('li').each(function(index,el){    $(el).css({'left':lisPosition[index],"top":lisPosition[index]});    })    $('li').each(function(index,el){    $(el).animate({'left':0,"top":0},3000);    })

    相关推荐：

    如何使用纯CSS实现一只会动的手（附源码）

    如何使用纯CSS实现一把剪刀的效果（附源码）

    以上就是如何使用css3实现魔方的动画效果（完整代码）的详细内容，更多请关注创想鸟其它相关文章！

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
    发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611625.html

    赞 (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    0 0

    关于作者

    程序猿的头像

    程序猿签约作者

    413.8K 文章
    0 评论
    2 粉丝
    这个人很懒，什么都没有留下～
    什么是浮动以及浮动的清除方法
    上一篇 2025年12月24日 02:26:11
    下一篇 2025年12月24日 02:26:28

    相关推荐

    发表回复

    登录后才能评论
    关注微信