Animierte cube-mag (nur zwei Seiten) - Effekt mit CSS3

Update: So eine leichte Missverständnisse auf, welche Flächen vorhanden sein müssen... also dieses update ist für eine vor und Seite Gesicht rotation.

Jedoch in der ursprünglichen Antwort unten, Punkte 1) und 2) sind immer noch gültig, die Probleme mit dem code. Punkte 3) und 4) nicht mehr gelten, da Sie sich mit der zurück Gesicht. Die restlichen CSS-Regeln können entfernt werden. Man könnte auch ziehen in der Perspektive wrapper zu geben, den cube ein "weniger flach" Aussehen - siehe updated demo.

HTML

<div id="experiment">
    <div class="cube">
        <div class="face front">
            front face
        </div>
        <div class="face side">
            side face
        </div>
    </div>
</div>

CSS

#experiment {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;

    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
}

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;

    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color:red;
}

.cube .side {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    background-color:orange;
}

.cube:hover{
    -webkit-transform:rotateY(90deg);     
}

Ursprüngliche Antwort

Gibt es 4 Probleme mit der demo-code, so betrachten wir Sie individuell und sehen, was die Lösung für jeden ist:

1) das HTML hat einen Rechtschreibfehler in der Klasse für die vor Gesicht - es fehlt ein r

<div class="face font"> statt <div class="face front">

2) Für Webkit-Browser, die Sie verwenden müssen, um die Präfix-Eigenschaft für transform

-webkit-transform:rotateY(90deg); statt transform:rotateY(90deg);

3) Die zurück Gesicht, das Sie gewählt haben, ist der falsche Gesicht. Sie haben repurposed die Links Gesicht durch einen Unfall. Die vor Gesicht ist korrekt, das ist ein <div> übersetzt 150px nach außen. Also die entsprechenden zurück Gesicht sollte man übersetzt -150px nach innen. Jedoch, wenn wir nur wissen, dass die position richtig wäre aber, wenn gedreht wird um den Mittelpunkt des Würfels auf die Rückseite würde am Ende nach hinten. Also die richtige zurück Gesicht wird zunächst um 180° gedreht um die Y Achse. Jedoch, durch Drehung um die Y Achse translation entlang Z noch +150px und nicht -150px.

.cube .back{
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
   background:orange;
}

4) Die Drehung um die zurück Gesicht in die position, wo die vor startet sollte sich eine rotation von 180° und nicht 90°

.cube:hover{
    -webkit-transform:rotateY(180deg);
}

Putting alle diese änderungen zusammen gibt dieses demo.

HTML

<div class="cube">
    <div class="face front">
        front face
    </div>
    <div class="face back">
        back face
    </div>
</div>

CSS

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color: red;
}

.cube .back {
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    background:orange;
}

.cube:hover{
    -webkit-transform:rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform:rotateY(180deg);
}