css 3D

浏览数：34 / 时间：2015年06月09日

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D立方体</title>
<style type="text/css">
<style>
    .stage {}
    .box {
        position: relative;margin: 200px;
        -webkit-transform-style:preserve-3d;
        /*-webkit-perspective:400px;*/
        /*-webkit-transform: rotateZ(45deg);*/
    }
    .box a {display: block;position: absolute;width: 200px; height: 200px; font-size: 188px; text-align: center; vertical-align: middle;border: 1px solid #789; text-decoration: none;
        /*-webkit-backface-visibility:hidden;*/
        background: rgba(200,220,0,.5);
    }
    .box a:nth-child(1) {-webkit-transform: rotateX(0deg) translateZ(100px)}
    .box a:nth-child(2) {-webkit-transform: rotateX(0deg) translateZ(-100px)}
    .box a:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(100px)}
    .box a:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(100px)}
    .box a:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(100px)}
    .box a:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(100px)}
    .box{-webkit-animation:run 5s linear infinite ;}    
    @-webkit-keyframes run{
        0%{-webkit-transform: rotateX(0deg) rotateY(0deg) }
        100%{-webkit-transform:rotateX(360deg)  rotateY(360deg)  }
    }
    </style>
</head>
<body>
    <div class="stage">
        <div class="box">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
        </div>
    </div>
</body>
</html>