黑马程序员技术交流社区

标题: 【太原校区】H5立方体特效源代码分享 [打印本页]
作者: 郝永亮    时间: 2019-3-7 19:50
标题: 【太原校区】H5立方体特效源代码分享
本帖最后由 郝永亮 于 2019-3-7 19:56 编辑

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            margin: 150px auto;
            position: relative;
            transform-style: preserve-3d;
            font-size: 40px;
            transform: rotateX(45deg) rotateY(45deg) ;
            animation: rotate 8s linear infinite ;
        }
        .box>div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
        }

        .box .front{
            background-color: red;
            transform:  translateZ(150px);
        }
        .box .back{
            background-color: orange;
            transform: rotateY(180deg) translateZ(150px);
        }
        .box .left{
            background-color: yellow;
            transform: rotateY(-90deg) translateZ(150px);
        }
        .box .right{
            background-color: green;
            transform: rotateY(90deg) translateZ(150px);
        }
        .box .top{
            background-color: #CC00FF;
            transform: rotateX(90deg) translateZ(150px);
        }
        .box .bottom{
            background-color: blue;
            transform: rotateX(-90deg) translateZ(150px);
        }

        @keyframes rotate {
            from{
                transform: rotateY(30deg) rotateX(-30deg);
            }
            to{
                transform: rotateY(390deg) rotateX(-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>




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2