Objekte verschieben mit transform:translate

Über die Eigenschaft transform:translate kann man über CSS Objekte verschieben.

Verschieben eines Objektes an der X Achse

Definition in css

div.translateX {
-moz-transform:translateX(100deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:translateX(100deg); /* Safari */
-o-transform:translateX(100deg); /* Opera */
-ms-transform:translateX(100deg); /* IE9 */
transform:translateX(100deg); /* W3C */
}

Und so schaut´s aus

Verschieben eines Objektes an der Y Achse

Definition in css

div.translateY {
-moz-transform:translateY(20deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:translateY(20deg); /* Safari */
-o-transform:translateY(20deg); /* Opera */
-ms-transform:translateY(20deg); /* IE9 */
transform:translateY(20deg); /* W3C */
}

Und so schaut´s aus

Verschieben eines Objektes an der X und der Y Achse

Definition in css

div.translate {
-moz-transform:translate(100deg,20deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:translate(100deg,20deg); /* Safari */
-o-transform:translate(100deg,20deg); /* Opera */
-ms-transform:translate(100deg,20deg); /* IE9 */
transform:translate(100deg,20deg); /* W3C */
}

Und so schaut´s aus