Fork me on GitHub

旋转六面体源码

应网友要求，也方便大家一起学习，在此贴出昨天编写旋转六面体源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>hexahedron</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
    .hexahedron {
        margin: 100px auto;
        width: 200px;
        height: 200px;
        perspective: 1000px;
        perspective-origin: 50% 50%;
    }
    
    .top,
    .bottom,
    .left,
    .right,
    .front,
    .back {
        position: absolute;
        top: 0px;
        left: 0px;
        border: 1px solid #000;
        width: 200px;
        height: 200px;
        text-align: center;
        font: bold 30px/200px "microsoft yahei";
        opacity: .6;
        transition: 1s;
    }
    
    .top {
        animation: opentop 1s both linear 0s 1;
    }
    
    .bottom {
        animation: openbottom 1s both linear 1s 1;
    }
    
    .left {
        animation: openleft 1s both linear 2s 1;
    }
    
    .right {
        animation: openright 1s both linear 3s 1;
    }
    
    .front {
        animation: openfront 1s both linear 4s 1;
    }
    
    .back {
        animation: openback 1s both linear 5s 1;
    }
    
    .all {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: animation 6s both linear 6s infinite;
    }
    
    .all:hover .top {
        color: #fff;
        background: red;
    }
    
    .all:hover .bottom {
        color: #fff;
        background: orange;
    }
    
    .all:hover .left {
        color: #fff;
        background: yellow;
    }
    
    .all:hover .right {
        color: #fff;
        background: green;
    }
    
    .all:hover .front {
        color: #fff;
        background: cyan;
    }
    
    .all:hover .back {
        color: #fff;
        background: blue;
    }
    
    @keyframes opentop {
        0% {
            transform: none;
        }
        100% {
            transform: translateZ(-100px) rotate3d(1, 0, 0, 90deg);
            transform-origin: 0 0;
        }
    }
    
    @keyframes openbottom {
        0% {
            transform: none;
        }
        100% {
            transform: translateZ(-100px) rotate3d(1, 0, 0, -90deg);
            transform-origin: 50% 100%;
        }
    }
    
    @keyframes openleft {
        0% {
            transform: none;
        }
        100% {
            transform: translateZ(-100px) rotate3d(0, 1, 0, -90deg);
            transform-origin: 0 0;
        }
    }
    
    @keyframes openright {
        0% {
            transform: none;
        }
        100% {
            transform: translateZ(-100px) rotate3d(0, 1, 0, 90deg);
            transform-origin: 100% 50%;
        }
    }
    
    @keyframes openfront {
        0% {
            transform: none;
        }
        100% {
            transform: translateZ(100px);
        }
    }
    
    @keyframes openback {
        0% {
            transform: none;
        }
        100% {
            transform: translateZ(-100px);
        }
    }
    
    @keyframes animation {
        0% {
            transform: rotate3d(0, 0, 0);
        }
        100% {
        	/*transform: rotate3d(0,0,0,90deg);*/
            transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        }
    }
    </style>
</head>

<body>
    <div class="hexahedron">
        <div class="all">
            <div class="top">top</div>
            <div class="bottom">bottom</div>
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="front">front</div>
            <div class="back">back</div>
        </div>
    </div>
</body>

</html>

　　

posted @ 2015-09-21 20:25  Jesse131  阅读(790)  评论(0)  编辑  收藏  举报