CSS3 3D Cube

Hier haben wir ein schönes Beispiel was man mit den neuen Funktionen in CSS3 anstellen kann. Das schwierigste hierbei war die einzelnen Flächen zu positionieren. Dies habe ich mit mit transform gemacht. Die einzelnen Flächen habe ich mit einem weiteren Div (.cube) umschlossen, in der die
eigentliche Drehung bzw. transition angewendet wird. Mittels einer JQuery Klassen Umschaltung kann man, durch Klicken auf die jeweiligen Button, die Animation Starten.

Hier mal ein Beispiel, im unteren Bereich findet Ihr die Navigation:
front
back
top
bottom
left
right
Front
Left
Right
Back
Top
Bottom

Der HTML Code

    <div class="wrap">
        <div class="cube">
            <div class="front"><span>front<span></div>
            <div class="back"><span>back</span></div>
            <div class="top"><span>top</span></div>
            <div class="bottom"><span>bottom</span></div>
            <div class="left"><span>left</span></div>
            <div class="right"><span>right</span></div>
        </div>
    </div>

    <div class="transition-control">
        <div class="control-front">Front</div>
        <div class="control-left">Left</div>
        <div class="control-right">Right</div>
        <div class="control-back">Back</div>
        <div class="control-top">Top</div>
        <div class="control-bottom">Bottom</div>
    </div>

Der CSS Code
   .block-sample-transtion{
        width: 100%;
        height: 200px;
    }

    .wrap {
        -webkit-perspective-origin: center center;
        -ms-perspective-origin: center center;
        -moz-perspective-origin: center center;
        perspective-origin: center center;
    }

    .cube {
        transition: all 1s ease;
        text-align: center;
        position: relative;
        width: 100px;
        height: 100px;
        -webkit-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -webkit-transform: rotateY(0deg) rotateX(0deg);
        -ms-transform: rotateY(0deg) rotateX(0deg);
        -moz-transform: rotateY(0deg) rotateX(0deg);
        transform: rotateY(0deg) rotateX(0deg);
    }

    .cube span{
        position: absolute;
        color: #fff;
        margin-top: -12px;
        width: 100px;
        top: 50%;
        display: block;

    }

    .cube div {
        position: absolute;
        width: 100px;
        height: 100px;
    }

    .back {
        -webkit-transform: translateZ(-50px) rotateY(180deg);
        -ms-transform: translateZ(-50px) rotateY(180deg);
        -moz-transform: translateZ(-50px) rotateY(180deg);
        transform: translateZ(-50px) rotateY(180deg);
        background: rgba(142, 58, 168, 1);
    }
    .right {
        -webkit-transform: rotateY(-270deg) translateX(50px);
        -ms-transform: rotateY(-270deg) translateX(50px);
        -moz-transform: rotateY(-270deg) translateX(50px);
        transform: rotateY(-270deg) translateX(50px);

        -webkit-transform-origin: top right;
        -ms-transform-origin: top right;
        -moz-transform-origin: top right;
        transform-origin: top right;
        background: rgba(168, 58, 58, 1);
    }
    .left {
        -webkit-transform: rotateY(270deg) translateX(-50px);
        -ms-transform: rotateY(270deg) translateX(-50px);
        -moz-transform: rotateY(270deg) translateX(-50px);
        transform: rotateY(270deg) translateX(-50px);

        -webkit-transform-origin: center left;
        -ms-transform-origin: center left;
        -moz-transform-origin: center left;
        transform-origin: center left;
        background: rgba(58, 168, 159, 1);
    }
    .top {
        -webkit-transform: rotateX(90deg) translateY(-50px);
        -ms-transform: rotateX(90deg) translateY(-50px);
        -moz-transform: rotateX(90deg) translateY(-50px);
        transform: rotateX(90deg) translateY(-50px);

        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        -moz-transform-origin: top center;
        transform-origin: top center;
        background: rgba(168, 58, 142, 1);
    }
    .bottom {
        -webkit-transform: rotateX(-90deg) translateY(50px);
        -ms-transform: rotateX(-90deg) translateY(50px);
        -moz-transform: rotateX(-90deg) translateY(50px);
        transform: rotateX(-90deg) translateY(50px);

        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        transform-origin: bottom center;
        background: rgba(71, 168, 58, 1);
    }
    .front {
        -webkit-transform: translateZ(50px);
        -ms-transform: translateZ(50px);
        -moz-transform: translateZ(50px);
        transform: translateZ(50px);
        background: rgba(90, 20, 240, 1);
    }

    .transition-control{
        height: 20px;
        margin-top: 20px;
    }

    .transition-control div{
        float: left;;
        margin-right: 10px;
        cursor: pointer;
    }
Und der der JQUery Code
     $(document).on("click",".control-front", function(){
        $(".cube").css("transform", "");
    });

    $(document).on("click",".control-left", function(){
        $(".cube").css("transform", "rotateY(90deg) rotateX(0deg)");
    });

    $(document).on("click",".control-right", function(){
        $(".cube").css("transform", "rotateY(-90deg) rotateX(0deg)");
    });

    $(document).on("click",".control-back", function(){
        $(".cube").css("transform", "rotateY(180deg) rotateX(0deg)");
    });

     $(document).on("click",".control-top", function(){
        $(".cube").css("transform", "rotateY(0deg) rotateX(-90deg)");
    });

     $(document).on("click",".control-bottom", function(){
        $(".cube").css("transform", "rotateY(0deg) rotateX(90deg)");
    });