javascript: Wie würden Sie Text mithilfe von Javascript drehen lassen?

Ich habe diesen Code:javascript: Wie würden Sie Text mithilfe von Javascript drehen lassen?

<img src="http://www.w3schools.com/html/html5.gif" id="imgid"> 
 
<h1 id='header'>Example</h1> 
 
<!--This is an example html doc not the real thing!--> 
 
<button onclick="spin(document.getElementById('header'));spin(document.getElementById('imgid'));">Spin!</button> 
 
<script> 
 
    function spin(object) { 
 
    setInterval(function() { 
 
     object.style.transform += "rotate(10deg)"; 
 
    }, 1); 
 
    } 
 
</script>

Wie kann ich den Text Spin richtig machen? Wenn Sie erklären könnten, wie es funktioniert, wäre das großartig. Wenn Sie alle Verweise meiner Quellen müssen dann:

von "richtig" Ich meine Spinnen zentriert. (Nicht auf der ganzen Seite).

Danke!

Quelle

2016-08-18 DecstarG

Was bedeutet "richtig drehen"? Es dreht sich sicher – j08691

Sie werden wahrscheinlich die Größe des Textelements ändern und seine Eigenschaft transform-origin ändern müssen. – Titus

Ich geklärt spinning korrekt Definition nach den Referenzen – DecstarG

Versuchen Sie dies. Das Hauptproblem war, dass die Breite den ganzen Weg über die Seite verlängert wurde, was die Rotation durcheinander brachte, so dass inline-block hinzugefügt wurde, damit die Breite mit dem Inhalt des divs übereinstimmt.

<style> 
#imgid{display:inline-block;} 
#myDIV{display:inline-block;} 
</style> 

<html> 
    <head> 
     <title>Example</title> 
    </head> 

    <body> 
     <div><img src="http://www.w3schools.com/html/html5.gif" id="imgid"></div> 
     <div><h1 id='myDIV'>Example</h1></div> 
     <div><button onclick="spin(document.getElementById('imgid'));spin(document.getElementById('myDIV'));">xdfdsf</button></div> 
    </body> 
</html> 

<script> 
function spin(object) 
{ 
    setInterval(function() 
    { 
     object.style.transform += "rotate(10deg)"; 
    }, 1); 
} 
</script>

Quelle

2016-08-18 03:25:15

javascript: Wie würden Sie Text mithilfe von Javascript drehen lassen?

Antwort

Verwandte Themen