按钮单击事件时旋转文本 [英] Rotate text at button click event

问题描述

我需要在按钮点击时以不同的角度旋转文本。

I need to rotate a text at different angles at button click.

我需要两个按钮，一个用于顺时针移动文本，另一个用于逆时针移动文本。

I need two button, one to move text clockwise and other to move text anticlockwise.

推荐答案

试试这个：

html：

<input id="rotateBtn" type="submit" value="rotate"/>
<div class="textToRotate">text to be rotated</div>

css（提示：使用transform-origin来控制旋转锚点，此处仅用于webkit）

css ( tip: use transform-origin to control rotation anchor point, here used only for webkit )

.rotate {
-moz-transform: rotate(7.5deg);  /* FF3.5+ */
 -o-transform: rotate(7.5deg);  /* Opera 10.5 */
 -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
 -webkit-transform-origin: 0 0 ;
 filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /*IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";  /* IE8 */
 }

jQuery on document ready：

jQuery on document ready:

 $('#rotateBtn').click(function() {
     $('.textToRotate').addClass('rotate');
 });

在这里查看： http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/

更新：每次点击增加20度： http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5 /

update: each click increments 20degrees: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5/

这篇关于按钮单击事件时旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！