Animierte Tür

[Chronos]

Hallo,

ich möchte für eine Reihe von DIV-Elementen einen Effekt erzielen,
dass wenn man über sie hovert, diese nach hinten wegklappen,
quasi wie eine Tür. Die Art und Weise wie ich es versucht habe finde ich sher umständlich und ich bin nicht in der Lage diese einfach anzupassen.
Im Grunde genommen muss man ja "nur" die linke Seite in seiner größe verkleinern.

Mein Versuch sieht so aus:

.box {
  height: 150px;
  width: 150px;
  background: red; }
  .box:hover {
    border-right: 150px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    height: 50px;
    width: 0;
    background: none; }

Allerdings ist das keine Flüssige Animation und ich bekomme es auch nicht hin, die Linke Seite so zu verkleinern,
ohne die Höhe an sich zu ändern. Hab irgendwie ein Brett vorm Kopf (ich glaub eh nicht dass das so eine gute Lösung ist).

MfG

 

[Cheffchen]

HAllo,

was soll da auch animiert sein?

entweder das mit jquery und animate() machen oder css3 halt mit transform.

Zeige mal was hast dann können dir bestimmt mehr helfen.

Cheffchen

 

[Chronos]

Das ist bereits alles.
Mit transform wüsste ich auch gar nicht wie ich Werte setzen müsste um es zu kippen.
So wie ich es jetzt habe, dreht sich ja etwaiger Text im Div nicht mit.