H5立方体特效源代码分享

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width300px;
            height300px;
            margin150px auto;
            positionrelative;
            transform-stylepreserve-3d;
            font-size40px;
            transformrotateX(45degrotateY(45deg) ;
            animationrotate 8s linear infinite ;
        }
        .box>div{
            positionabsolute;
            top0;
            left0;
            width100%;
            height100%;
            opacity.5;
        }

        .box .front{
            background-colorred;
            transform:  translateZ(150px);
        }
        .box .back{
            background-colororange;
            transformrotateY(180degtranslateZ(150px);
        }
        .box .left{
            background-coloryellow;
            transformrotateY(-90degtranslateZ(150px);
        }
        .box .right{
            background-colorgreen;
            transformrotateY(90degtranslateZ(150px);
        }
        .box .top{
            background-color#CC00FF;
            transformrotateX(90degtranslateZ(150px);
        }
        .box .bottom{
            background-colorblue;
            transformrotateX(-90degtranslateZ(150px);
        }

        @keyframes rotate {
            from{
                transformrotateY(30degrotateX(-30deg);
            }
            to{
                transformrotateY(390degrotateX(-30deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">正面</div>
    <div class="back">背面</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="top">上边</div>
    <div class="bottom">下边</div>
</div>
<script>
</script>
</body>
</html>

发布了896 篇原创文章 · 获赞 9 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览