• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

DIV mit Schatten drehen

Y

Yogilein

Member
Hallo,

mal wieder eine Frage, die mich zum Verzweifeln bringt:

Wie drehe ich ein DIV, ohne dass der Schatten mitgedreht wird?

Meine aktuelle Lösung besteht aus zwei DIVs, wobei das eine den Inhalt enthält und das andere lediglich den Schatten. Gedreht wird dann nur das DIV mit Inhalt.

Das funktioniert, frisst aber Ressourcen. In meinem aktuellen Fall, meinem neuen Spiel "Abräumen", habe ich 500 solcher DIVs auf dem Spielfeld platziert (mit Schatten also 1000 DIVs) und nun gehen (je nach Browser) Scrollvorgänge recht schleppend und hakend, z.B. in der Anleitung. Reduziere ich die Anzahl der DIVs drastisch, geht auch das Scrollen wieder problemlos.

Nun mal konkret: Kann ich an ein gedrehtes DIV einen Schatten anbringen, der unabhängig von dem Winkel immer in die gleiche Richtung zeigt, ohne ein weiteres DIV verwenden zu müssen?
 
Ja, du musst hald den Schatten bei der Animation einfach immer auch entsprechend ändern:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#rotate {
	box-shadow: 10px 10px 0px;
	width: 100px;
	height: 100px;
	border: 1px solid black;
}</style>
</head>
<body>
<div id="rotate"></div>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
function rotate(){
	var radius = Math.sqrt(200);
	var lightAngle = Math.PI * 1/4;
	function getBoxShadow(angle){
		return kkjs.sprintf(
			"%.3fpx %.3fpx 0px",
			radius * Math.cos(angle),
			radius * Math.sin(angle)
		)
	}
	var div = kkjs.$("rotate")
	kkjs.css.set(div, {
		rotation: "0deg",
		boxShadow: getBoxShadow(lightAngle)
	});
	kkjs.css.animate(
		div,
		{rotation: "360deg"},
		{
			onfinish: rotate,
			onrun: function(step){
				var angle = lightAngle - step * Math.PI * 2;
				kkjs.css.set(
					div,
					"box-shadow",
					getBoxShadow(angle)
				);
			},
			duration: 10
		}
	);
}
rotate();
</script>
</body>
</html>
 
Hallo kkapsner,

vielen Dank für die Lösung. Leider bleibe ich hängen, da ich kein Framework lade.

Aber vielleicht geht es auch ohne relativ einfach.

Folgende Situation:

Ich habe ein DIV, das so aussieht:

Code: 
width:50px
height:50px
background-color:red
border-radius:100%
innerHTML:J
box-shadow:3px 3px 8px 0 rgb(128,0,0) inset,3px 3px 3px 0 gb(50,50,50)

Der Schatten liegt also rechts unten.

Nun drehe ich das DIV, z.B. um 30° und ...

Code: 
moz-transform:30deg
webkit-transform:30deg
o-transform:30deg
ms-transform:30deg
transform:30deg

... wünsche mir den Schatten an der gleichen Stelle. Also muss ich jeweils beim Schatten nicht 3px 3px angeben, sondern einen anderen Wert. Und den zu berechnen, fällt mir momentan sehr schwer.

Gegeben ist der Winkel und als Ergebnis brauche ich die beiden Werte. Wie berechne ich also diese?
 
Zuletzt bearbeitet von einem Moderator:
Ich habe gerade gesehen, dass ich das CSS falsch angegeben hatte. Ich habe es aus meinem JS genommen und irgendwie falsch umgesetzt. Daher jetzt der komplette Original-JS-Code, der so auch funktioniert.
Code: 
for(i=1;i<=500;i++){
var winkel="rotate("+Math.floor(Math.random()*(360)+1)+"deg)";
var links=Math.floor(Math.random()*(500-100))+"px";
var oben=Math.floor(Math.random()*(500-100))+"px";
var farbe=Math.floor(Math.random()*6+1);
var z1=document.createElement("k"+i);
var z2=document.createElement("s"+i);
switch(farbe){
case 1: farbe="red";z2.style.boxShadow="3px 3px 8px 0 rgb(128,0,0) inset,3px 3px 5px 0 rgb(50,50,50)";break;
case 2: farbe="green";z2.style.boxShadow="3px 3px 8px 0 rgb(0,65,0) inset,3px 3px 5px 0 rgb(50,50,50)";break;
case 3: farbe="royalblue";z2.style.boxShadow="3px 3px 8px 0 rgb(33,53,113) inset,3px 5px 5px 0 rgb(50,50,50)";break;
case 4: farbe="yellow";z2.style.boxShadow="3px 3px 8px 0 rgb(128,128,0) inset,3px 3px 5px 0 rgb(50,50,50)";break;
case 5: farbe="violet";z2.style.boxShadow="3px 3px 8px 0 rgb(119,65,119) inset,3px 3px 5px 0 rgb(50,50,50)";break;
case 6: farbe="orange";z2.style.boxShadow="3px 3px 8px 0 rgb(128,83,0) inset,3px 3px 5px 0 rgb(50,50,50)";break;}
z1.style.position="absolute";
z1.style.width="50px";
z1.style.height="50px";
z1.style.backgroundColor=farbe;
z1.style.left=links;
z1.style.top=oben;
z1.style.border="1px solid rgb(50,50,50)";
z1.style.borderRadius="100%";
z1.style.fontFamily="Arial";
z1.style.fontSize="16pt";
z1.style.color="black";
z1.style.fontWeight="bold";
z1.style.MozTransform=winkel;
z1.style.WebkitTransform=winkel;
z1.style.OTransform=winkel;
z1.style.MsTransform=winkel;
z1.style.transform=winkel;
z1.style.textAlign="center";
z1.style.display="table-cell";
z1.style.verticalAlign="middle";
z1.id="k"+i;
z1.innerHTML=i%10;
if(element[i]==2)z1.innerHTML="J";
if(element[i]==3){
z1.innerHTML="*";
z1.style.fontSize="30pt";}
z2.onclick=module.klick;
z2.style.position="absolute";
z2.style.width="50px";
z2.style.height="50px";
z2.style.background="transparent";
z2.style.left=links;
z2.style.top=oben;
z2.style.border="1px solid rgb(50,50,50)";
z2.style.borderRadius="100%";
z2.id="s"+i;
r2.appendChild(z1);
r2.appendChild(z2);}
},
Ich nutze also z1 für die Darstellung und Drehung und z2 für den Schatten. Ziel ist, in z1 den Schatten unterzubringen, so dass er immer gleich liegt.
 
Zuletzt bearbeitet von einem Moderator:
@Yogilein: Danke für das Posten der Lösung. Für mehrzeiligen Code eignet sich INLINE nicht. Nimm dafür lieger HTML oder CODE Tags.

Kann dieser Thread als gelöst markiert werden?
 
Nein, das ist nicht die Lösung, sondern meine aktuelle Vorgehensweise mit zwei DIVs, eines für den Inhalt und eines für den Schatten. Ich habe den Code nur hochgeladen, damit man meinen aktuellen Ansatz sieht.

Mein Ziel ist ja, aus den zwei DIVs eines zu machen, das zwar gedreht ist, aber den Schatten immer an der selben Stelle hat. Ich gehe davon aus, dass ich dann in meinem Beispiel die beiden ersten 3px-Werte jeweils durch eine Variable ersetzen muss. Nur ich weiß absolut nicht, wie ich die Werte errechnen soll.

Und genau das ist noch meine offene Frage.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben