CSS3 3D旋转立方体

来源：互联网发布：恶搞软件制作编辑：程序博客网时间：2024/05/17 04:35
<!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>
阅读全文
1 0