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>

Ein Element mit Javascript und CSS drehen geschrieben am 19.05.2012

Kommentare: