css3 旋转 cubic

css3 旋转立方体(来源：https://suite.websecurify.com/login)
 firefox 下可以正常预览，chrome没测过，IE11不能正常预览
 
<html>
<head>
<title></title>
<link type="text/css" href="splash.css" rel="stylesheet" />
</head>
<body>
<div id="content">
    <div id="container">
        <div id="cubics">
            <div id="cube">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
 
/*************splash.css 文件****************/
 
@keyframes fadeInKeyframes{0%{opacity:0;transform:translateY(startYposition)}100%{opacity:1;transform:translateY(endYposition)}}

@-moz-keyframes fadeInKeyframes{0%{opacity:0;-moz-transform:translateY(startYposition)}100%{opacity:1;-moz-transform:translateY(endYposition)}}

@-webkit-keyframes fadeInKeyframes{0%{opacity:0;-webkit-transform:translateY(startYposition)}100%{opacity:1;-webkit-transform:translateY(endYposition)}}

@keyframes fadeOutKeyframes{0%{opacity:1;transform:translateY(startYposition)}100%{opacity:0;transform:translateY(endYposition)}}

@-moz-keyframes fadeOutKeyframes{0%{opacity:1;-moz-transform:translateY(startYposition)}100%{opacity:0;-moz-transform:translateY(endYposition)}}

@-webkit-keyframes fadeOutKeyframes{0%{opacity:1;-webkit-transform:translateY(startYposition)}100%{opacity:0;-webkit-transform:translateY(endYposition)}}


body{background-color:rgba(43, 43, 43, 0.5);background-size:auto;background-position:0 0}

/*div#content{background-color:rgba(43,43,43,0.5)}.maintenance{padding:5px;background:#ba3a19;color:#fff}
*/
@media(max-width:600px){nav#topnav{display:none}}

div#content{margin-left:0;margin-right:0;padding-left:0;padding-right:0;display:block;width:312px;height:242px}

@media(min-width:312px){div#content{position:absolute;left:50%;margin-left:-156px}}
@media(min-height:342px){div#content{position:absolute;top:50%;margin-top:-121px}}
@media(min-width:312px){div#content{position:absolute;left:50%;margin-left:-156px}}
@media(min-height:342px){div#content{position:absolute;top:50%;margin-top:-121px}}
@media(min-width:312px){div#content{position:absolute;left:50%;margin-left:-156px}}
@media(min-height:342px){div#content{position:absolute;top:50%;margin-top:-121px}}




#content #cubics{
    position:absolute;
    top:0;
    left:50px;
    z-index:1
}
#content #cubics #cube{
    position:relative;
    margin:0 auto;
    height:200px;
    width:200px;
    transition:transform 2s linear;
    -o-transition:-o-transform 2s linear;
    -ms-transition:-ms-transform 2s linear;
    -moz-transition:-moz-transform 2s linear;
    -webkit-transition:-webkit-transform 2s linear;
    transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    animation-name:spinKeyframes;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-duration:6s;
    -moz-animation-name:spinKeyframes;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:6s;
    -webkit-animation-name:spinKeyframes;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:6s
}
#content #cubics #cube>div{
    position:absolute;
    height:200px;
    width:200px;
    padding:0;
    background-position:center center;
}
#content #cubics #cube>div:nth-child(1){
    transform:translateZ(50px);
    -o-transform:translateZ(50px);
    -ms-transform:translateZ(50px);
    -moz-transform:translateZ(50px);
    -webkit-transform:translateZ(50px)
}
#content #cubics #cube>div:nth-child(2){
    transform:rotateY(90deg) translateZ(50px);
    -o-transform:rotateY(90deg) translateZ(50px);
    -ms-transform:rotateY(90deg) translateZ(50px);
    -moz-transform:rotateY(90deg) translateZ(50px);
    -webkit-transform:rotateY(90deg) translateZ(50px)
}
#content #cubics #cube>div:nth-child(3){
    transform:rotateY(180deg) translateZ(50px);
    -o-transform:rotateY(180deg) translateZ(50px);
    -ms-transform:rotateY(180deg) translateZ(50px);
    -moz-transform:rotateY(180deg) translateZ(50px);
    -webkit-transform:rotateY(180deg) translateZ(50px)
}
#content #cubics #cube>div:nth-child(4){
    transform:rotateY(-90deg) translateZ(50px);
    -o-transform:rotateY(-90deg) translateZ(50px);
    -ms-transform:rotateY(-90deg) translateZ(50px);
    -moz-transform:rotateY(-90deg) translateZ(50px);
    -webkit-transform:rotateY(-90deg) translateZ(50px)
}
#content #cubics #cube>div:nth-child(5){
    transform:rotateX(-90deg) translateZ(50px) rotate(180deg);
    -o-transform:rotateX(-90deg) translateZ(50px) rotate(180deg);
    -ms-transform:rotateX(-90deg) translateZ(50px) rotate(180deg);
    -moz-transform:rotateX(-90deg) translateZ(50px) rotate(180deg);
    -webkit-transform:rotateX(-90deg) translateZ(50px) rotate(180deg)
}
#content #cubics #cube>div:nth-child(6){
    transform:rotateX(90deg) translateZ(50px);
    -o-transform:rotateX(90deg) translateZ(50px);
    -ms-transform:rotateX(90deg) translateZ(50px);
    -moz-transform:rotateX(90deg) translateZ(50px);
    -webkit-transform:rotateX(90deg) translateZ(50px)
}
@keyframes spinKeyframes{
    from{transform:rotateX(0deg) rotateY(0deg)}
    to{transform:rotateX(360deg) rotateY(360deg)}
}
@-moz-keyframes spinKeyframes{
    from{-moz-transform:rotateX(0deg) rotateY(0deg)}
    to{-moz-transform:rotateX(360deg) rotateY(360deg)}
}
@-webkit-keyframes spinKeyframes{
    from{-webkit-transform:rotateX(0deg) rotateY(0deg)}
    to{-webkit-transform:rotateX(360deg) rotateY(360deg)}
}
#content #cubics #cube>div{border:1px dotted #eee}
posted @ 2013-11-17 19:00  goobeer  阅读(284)  评论(0)  编辑  收藏  举报