javascript：你将如何使用JavaScript让文本旋转？

我有这样的代码：javascript：你将如何使用JavaScript让文本旋转？

<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>

如何让正确的文本旋转？如果你能解释它是如何工作的，那就太好了。如果你需要那么我的消息来源任何引用：

所谓 “正确” 我的意思是纺中心。（并非全部在页面上）。

谢谢！

来源

2016-08-18 DecstarG

“正确旋转”是什么意思？它肯定会旋转 – j08691

您可能不得不调整文本元素的大小并更改它的'transform-origin'属性。 – Titus

我在参考文献后澄清了正确的纺纱定义 – DecstarG

试试这个。主要问题是宽度一直延伸到旋转的页面上，因此在显示中添加：inline-block使宽度与div的内容匹配。

<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>

来源

2016-08-18 03:25:15

javascript：你将如何使用JavaScript让文本旋转？

回答

相关问题