Impressum DatenschutzerklärungDiese Seite per HTTPS ansehen.


Ein Element mit Javascript und CSS drehen geschrieben am 19.05.2012

Hier ein Beispiel wie man ein Element mit Javascript und CSS drehen kann:

Drehen

Was braucht man? Ein Element das man drehen möchte:

<div id="drehobject" class="aussehen">Drehen</div>

Und das Script dazu:

<script language="JavaScript" type="text/javascript"> var zpos=0; function f_objdrehen(){ zpos++; if(zpos>359)zpos=0; var dz=document.getElementById("drehobject"); dz.style.MsTransform = "rotate("+zpos+"deg) translate(-50px,0)"; dz.style.MozTransform = "rotate("+zpos+"deg) translate(-50px,0)"; dz.style.OTransform = "rotate("+zpos+"deg) translate(-50px,0)"; dz.style.WebkitTransform = "rotate("+zpos+"deg) translate(-50px,0)"; dz.style.transform = "rotate("+zpos+"deg) translate(-50px,0)"; window.setTimeout("f_objdrehen()", 14); } f_objdrehen(); </script>

Hier bei wird noch mit translate das Objekt um 50Pixel verschoben so das der Drehpunkt am Ende der "Linie" ist.

Mit etwas CSS macht man das ganze noch sichtbar:

<style type="text/css"> .aussehen{ width:100px; height:1px; position:relative; left:100px; top:0; /*background-color:#000;*/ border-top-width:2px; border-top-style:solid; border-top-color:#000000; } </style>

Kommentare:


#1 Daniel schrieb am 24.07.2013 um 20:41
Super, Danke!

#2 Lukas schrieb am 02.04.2015 um 13:35
Habe den Code genau so kopiert. Bei mir funktioniert es nicht. Ist der Code veraltet?

#3 Andreas schrieb am 02.04.2015 um 17:29
ja das Script ist älter sollte aber noch so funktionieren. Siehst Du oben das Wort "drehen" drehen?
Ansonsten kann man auch mit css-Animationen machen:
http://www.w3schools.com/css/css3_animations.asp



Inhalt zur freien Verwendung gibs es beim Thema Downloads.
nach oben springen
mehr auf: Instagram, github, thingiverse