<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>CSS3 3D旋转立方体</title>
    <style>
        body{
            margin:0;
            padding:0;
        }

        .cube{
            width: 800px;
            height: 400px;
            /*
                perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变
                3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素
                会获得透视效果，而不是元素本身。
                注释：perspective 属性只影响 3D 转换元素。
            */
            -webkit-perspective: 1000px;
            margin:200px auto 0 auto;
        }

        .ant{
            width: 100%;
            height: 100%;
            /*
                transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
                flat            子元素将不保留其 3D 位置。
                preserve-3d     子元素将保留其 3D 位置。
                注释：该属性必须与 transform 属性一同使用。
            */
            -webkit-transform-style: preserve-3d;
            /*
                translate3d(x,y,z)  定义 3D 转换。
                rotateY(angle)  定义沿着 Y 轴的 3D 旋转。
            */
            -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            -webkit-animation:xuanzhuan 5s infinite linear;
        }

        .face{
            width: 100%;
            height: 100%;
            position: absolute;
            border:1px solid;
            -webkit-backface-visibility: visible;
            overflow: hidden;
            z-index: 10;
            text-align: center;
            font-size: 50px;
        }

        .face span {
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        .face-right{
            -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);
        }
        .face-left{
            -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);
        }
        .face-in{
            -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);
        }
        .face-out{
            -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);
        }
        .face-bottom{
            height: 800px;
            -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);
        }
        .face-top{
            height: 800px;
            -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);
        }

        @-webkit-keyframes xuanzhuan{
            from{
                -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            }
            to{
                -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="cube">
    <div class="ant">
        <div class="face face-right"><span></span>1</div>
        <div class="face face-left"><span></span>2</div>
        <div class="face face-in"><span></span>3</div>
        <div class="face face-out"><span></span>4</div>
        <div class="face face-bottom"><span></span>5</div>
        <div class="face face-top"><span></span>6</div>
    </div>
</div>
</body>
</html>

CSS3 3D旋转立方体_3D