首页手记 CSS3制作转动立方体（小菜鸟）

CSS3制作转动立方体（小菜鸟）

标签：

CSS3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
body{background: black;}
.wrap{
    height:350px;
    position:relative;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 0px;
     -o-transform-style: preserve-3d;
     -o-perspective: 0px;
     -moz-transform-style: preserve-3d;
     -moz-perspective: 0px;
     transform-style: preserve-3d;
     perspective: 0px;

     -webkit-animation: myanimation 5s ease-in-out 3s infinite;
     -o-animation: myanimation 5s ease-in-out 3s infinite;
     -moz-animation: myanimation 5s ease-in-out 3s infinite;
     -ms-animation: myanimation 5s ease-in-out 3s infinite;
     animation: myanimation 5s ease-in-out 3s infinite;

}
.box{
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
    line-height:200px;
    font-size:48px;
    text-align: center;
    color:white;

}
.box1{
    -webkit-transform: rotateY(90deg) translateZ(-100px);
    -o-transform: rotateY(90deg) translateZ(-100px);
    -moz-transform: rotateY(90deg) translateZ(-100px);
    transform: rotateY(90deg) translateZ(-100px);
    background-color: rgba(56, 89, 157, 0.5);
}
.box2{
    -webkit-transform: rotateX(90deg) translateZ(100px) ;
    -o-transform: rotateX(90deg) translateZ(100px);
    -moz-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(156, 189, 157, 0.5);
}
.box3{
    -webkit-transform: rotateY(90deg) translateZ(100px);
    -o-transform: rotateY(90deg) translateZ(100px);
    -moz-transform: rotateY(90deg) translateZ(100px);
    transform: rotateY(90deg) translateZ(100px);
    background-color: rgba(156, 69, 195, 0.5);
}
.box4{
    -webkit-transform: rotateX(90deg) translateZ(-100px);
    -o-transform: rotateX(90deg) translateZ(-100px);
    -moz-transform: rotateX(90deg) translateZ(-100px);
    transform: rotateX(90deg) translateZ(-100px);
    background-color: rgba(156, 249, 195, 0.5);
}
.box5{
    -webkit-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    transform: translateZ(-100px);
    background: #f60;
}
.box6{
    -webkit-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    transform: translateZ(100px);
    background-color: rgba(256, 149, 0, 0.5);
}
@-webkit-keyframes myanimation{
    0%{
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -webkit-transform-origin: center center;
    }
    100%{
        -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        -webkit-transform-origin: center center;
    }
}
@-moz-keyframes myanimation{
    0%{
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform-origin: center center;
    }
    100%{
        -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        -moz-transform-origin: center center;
    }
}
@-o-keyframes myanimation{
    0%{
        -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -o-transform-origin: center center;
    }
    100%{
        -o-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        -o-transform-origin: center center;
    }
}
@-ms-keyframes myanimation{
    0%{
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform-origin: center center;
    }
    100%{
        -ms-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        -ms-transform-origin: center center;
    }
}
@keyframes myanimation{
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }
    100%{
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
        transform-origin: center center;
    }
}
    </style>

</head>
<body>
    <div class="wrap">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
</body>
</html>

点击查看更多内容