基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效。这款特效适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下：

实现的代码。

html代码：

  <div class="wrap">

        <div class="box1 box">

            1</div>

        <div class="box2 box">

            2</div>

        <div class="box3 box">

            3</div>

        <div class="box4 box">

            4</div>

        <div class="box5 box">

            5</div>

        <div class="box6 box">

            6</div>

    </div>

css3代码：

*{margin:;padding:;}

html,body{height: 100%;background: black;}

.wrap{

      height: 100%;position: relative;

      -webkit-transform-style:preserve-3d;

      -webkit-perspective:0px;

      -moz-transform-style:preserve-3d;

      -moz-perspective:0px;

      -webkit-animation:mydhua 5s ease infinite;

      -moz-animation:mydhua 5s ease infinite;

}

.box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;

     margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white;

        }

.box1{

    -webkit-transform:rotatey(90deg) translatez(-100px);

    -moz-transform:rotatey(90deg) translatez(-100px);

    background: rgba(128,0,128,.5);

}

.box2{

    -webkit-transform:rotatey(90deg) translatez(100px);

    -moz-transform:rotatey(90deg) translatez(100px);

    background: rgba(255,0,255,.5);

}

.box3{

    -webkit-transform:rotatex(90deg) translatez(100px);

    -moz-transform:rotatex(90deg) translatez(100px);

    background: rgba(255,153,204,.5);

}

.box4{

    -webkit-transform:rotatex(90deg) translatez(-100px);

    -moz-transform:rotatex(90deg) translatez(-100px);

    background: rgba(0,204,255,.5);

}

.box5{

    -webkit-transform: translatez(-100px);

    -moz-transform:translatez(-100px);

    background: rgba(153,204,255,.5);

}

.box6{

    -webkit-transform: translatez(100px);

    -moz-transform:translatez(100px);

    background: rgba(0,255,255,.5);

}

@-webkit-keyframes mydhua{

    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 mydhua{

    0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}

    100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}

}

via:http://www.w2bc.com/Article/16554

巴特西

基于css3的3D立方体旋转特效

最新文章

热门文章