立体正方形动画

先看效果

image.png

image.png

html代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0 auto;
        padding: 0;
    }
    @keyframes rotate {
        0% {
            transform: rotateX(0deg) rotateY(0deg);
        }
        100% {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    html {
        /*background: linear-gradient(#ff0 0%, #000 80%);*/
        background:#CCFFFF;
        height: 100%;
    }
    .box {
        margin-top: 200px;
        perspective: 1000px;
    }
    .cube {
        width: 200px;
        height: 200px;
        position: relative;
        color: #fff;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        line-height: 200px;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-70deg);
        animation: rotate 20s infinite linear;
    }
    .cube>div {
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        position: absolute;
        background-color: #333;
        opacity: .6;
        transition: transform 0.4s ease-in;
    }
    .cube .out-front {
        color:rgba(0,0,255,0.3);
        background-color: rgba(0,0,255,0.3);
        transform: translateZ(100px);
    }
    .cube .out-back {
        color:rgba(0,125,125,0.3);
        background-color: rgba(0,125,125,0.3);
        transform: translateZ(-100px) rotateY(180deg);
    }
    .cube .out-left {
        color:rgba(255,0,0,0.3);
        background-color: rgba(255,0,0,0.3);
        transform: translateX(-100px) rotateY(-90deg);
    }
    .cube .out-right {
        color:rgba(0,255,0,0.3);
        background-color:rgba(0,255,0,0.3);
        transform: translateX(100px) rotateY(90deg);
    }
    .cube .out-top {
        color:rgba(125,125,0,0.3);
        background-color: rgba(125,125,0,0.3);
        transform: translateY(-100px) rotateX(90deg);
    }
    .cube .out-bottom {
        color:rgba(125,125,225,0.3);
        background-color: rgba(125,125,225,0.3);
        transform: translateY(100px) rotateX(-90deg);
    }
    .cube>span {
        display: block;
        width: 100px;
        height: 100px;
        border: 1px solid #fff;
        background-color: pink;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .cube .in-front {
        transform: translateZ(50px);
    }
    .cube .in-back {
        transform: translateZ(-50px) rotateY(180deg);
    }
    .cube .in-left {
        transform: translateX(-50px) rotateY(-90deg);
    }
    .cube .in-right {
        transform: translateX(50px) rotateY(90deg);
    }
    .cube .in-top {
        transform: translateY(-50px) rotateX(90deg);
    }
    .cube .in-bottom {
        transform: translateY(50px) rotateX(-90deg);
    }
    .box:hover .out-front {
        transform: translateZ(200px);
    }
    .box:hover .out-back {
        transform: translateZ(-200px) rotateY(180deg);
    }
    .box:hover .out-left {
        transform: translateX(-200px) rotateY(-90deg);
    }
    .box:hover .out-right {
        transform: translateX(200px) rotateY(90deg);
    }
    .box:hover .out-top {
        transform: translateY(-200px) rotateX(90deg);
    }
    .box:hover .out-bottom {
        transform: translateY(200px) rotateX(-90deg);
    }

    .cube:hover * {
        background: currentColor;
        box-shadow: 0 0 20vh currentColor;
    }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

</head>

<body>
    <div class="box">
        <div class="cube">
            <div class="out-front">front</div>
            <div class="out-back">back</div>
            <div class="out-left">left</div>
            <div class="out-right">right</div>
            <div class="out-top">top</div>
            <div class="out-bottom">bottom</div>
            <span class="in-front"></span>
            <span class="in-back"></span>
            <span class="in-left"></span>
            <span class="in-right"></span>
            <span class="in-top"></span>
            <span class="in-bottom"></span>
        </div>
    </div>
     <script type="text/javascript">
        $('.out-front').click(function(){
            window.location.href = "";
        });
        $('.out-back').click(function(){
            alert('you are back');
        });
        $('.out-right').click(function(){
            alert('you are right');
        });
        $('.out-left').click(function(){
            alert('you are left');
        });
        $('.out-bottom').click(function(){
            alert('you are bottom');
        });
        $('.out-top').click(function(){
            alert('you are top');
        });
    </script>
</body>

</html>