!!! Listings zum Artikel "Fuer Kaskadeure"
!!! von Henning Behme in iX 11/09, S. 144

!!! Listing 1: Stil zweier transformierter div-Elemente

div#nicht_verschoben {
    -moz-transform: skew(30deg); 
    -moz-transform-origin:0% 0%; 

    -webkit-transform: skew(30deg); 
    -webkit-transform-origin:0% 0%;
}
div#verschoben {
    -moz-transform: translate(250px) rotate(40deg);
    -moz-transform-origin: 75% 70%;

    -webkit-transform: translate(250px) rotate(40deg);
    -webkit-transform-origin: 75% 70%;
}

!!! Listing 2: HTML-Schnipsel

<div id="behaeltnis">
  <div id="innen">
    <div>-webkit-transform: translateZ(-100px) rotate(45deg);</div>
    <div>und ... <img src="/ix/images/titel/ixtitel0909.gif" /></div>
  </div>
</div>

!!! Listing 3: CSS für 3D (Ausschnitt)

div#behaeltnis { position: relative; 
     -webkit-perspective: 500; }

div#innen {  
     -webkit-transform-style: preserve-3d; 
     -webkit-animation-play-state: paused;
     -webkit-animation: spin 10s infinite linear; }

#behaeltnis:hover #innen { -webkit-animation-play-state: running; }

@-webkit-keyframes spin {
     from { -webkit-transform: rotateY(0); }
     to   { -webkit-transform: rotateY(360deg); }
}

#innen > div { position: absolute; top: 50px; left: 50px;
     -webkit-box-sizing: border-box; }

#innen > :first-child {
    -webkit-transform: translateZ(-100px) rotate(45deg);
}

#innen > :last-child {
    -webkit-transform: translateZ(50px) rotate(20deg);
    -webkit-transform-origin: 50% 20%;
}