cube css3

Note : You can Uncheak the checkboxs and see the property effect on the cube! Oh Yeahhhh! :))
[Mozilla Firefox has a little problem with this page!]

Note 2! : Sorry !! English is not my mother language! [Im iranian]

property checkboxs!

Preserve-3d in transform-style Not work correctly in mozilla firefox
absolute Positioning
Front Side Translate Z : px
Back Side Translate Z : px rotateY deg
Left Side rotateY : deg TranslateX : px
Right Side rotateY : deg TranslateX : px
Top Side rotateX : deg TranslateY : px
Bottom Side rotateX : deg TranslateY : px

<div id="mainDiv">     <div id="boxDiv">         <div id="front"><br>HTML5 + CSS3</div>         <div id="back"><br> JQuery</div>         <div id="left"><br>JavaScript</div>         <div id="right"><br>Sass , Less</div>         <div id="top"><br>C# , C++</div>         <div id="bottom"><br>Java</div>     </div> </div> <style>     #mainDiv {         width: 200px;         height: 200px;         margin: 100px auto;         -webkit-perspective: 800px;         perspective: 800px;     }      #boxDiv {         width: 200px;         -webkit-animation: anim 15s linear infinite;         animation: anim 15s linear infinite;         -webkit-transform-style: preserve-3d;         transform-style: preserve-3d;     }      #boxDiv div {         width: 200px;         height: 200px;         position: absolute;         opacity: .8;         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";         color: #fff;         font: 40px impact;         text-align: center;     }      #front {         -webkit-transform: translateZ(100px);         transform: translateZ(100px);         background: #000;     }      #back {         -webkit-transform: rotateY(180deg) translateZ(100px);         transform: rotateY(180deg) translateZ(100px);         background: #101010;     }      #left {         -webkit-transform-origin: left;         transform-origin: left;         -webkit-transform: rotateY(-90deg) translateX(-100px);         transform: rotateY(-90deg) translateX(-100px);         background: #000;     }      #right {         -webkit-transform-origin: right;         transform-origin: right;         -webkit-transform: rotateY(90deg) translateX(100px);         transform: rotateY(90deg) translateX(100px);         background: #101010;     }      #top {         -webkit-transform: rotateX(-90deg) translateY(-100px);         transform: rotateX(-90deg) translateY(-100px);         -webkit-transform-origin: top;         transform-origin: top;         background: #000;     }      #bottom {         -webkit-transform: rotateX(90deg) translateY(100px);         transform: rotateX(90deg) translateY(100px);         -webkit-transform-origin: bottom;         transform-origin: bottom;         background: #101010;     }      @-webkit-keyframes anim {         0% {             -webkit-transform: rotateY(0);             transform: rotateY(0);         }         100% {             -webkit-transform: rotateY(360deg);             transform: rotateY(360deg);         }     }      @keyframes anim {         0% {             -webkit-transform: rotateY(0);             transform: rotateY(0);         }         100% {             -webkit-transform: rotateY(360deg);             transform: rotateY(360deg);         }     } </style>

this is the default code of cube for you!

Note : You can Uncheak the checkboxs and see the property effect on the cube! Oh Yeahhhh! :)) [Mozilla Firefox has a little problem with this page!]

Note 2! : Sorry !! English is not my mother language! [Im iranian]

Note : You can Uncheak the checkboxs and see the property effect on the cube! Oh Yeahhhh! :))
[Mozilla Firefox has a little problem with this page!]