Question

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

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

Answer 1

试试这个：

HTML：

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

css（提示：使用transform-origin来控制旋转锚点，此处仅用于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：

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

在此处查看：http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/

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

Answer 2

我正在回答我自己的问题。我找到了我想要的东西只是因为你们。你们都帮了我很多。

由于

     <style type="text/css" media="screen">
            .square {
               width: 144px;
               height: 144px;
               background: #fff;
               margin-right: 48px;
               float: left;
                   }

             .transformed {
          -webkit-transform: rotate(15deg) scale(1.25, 0.5);
          -moz-transform: rotate(15deg) scale(1.25, 0.5);
           transform: rotate(15deg) scale(1.25, 0.5);
                       }
          </style>
          <script type="text/javascript">

             function change(txt){
                    var d = document.getElementById('derg').value || 0;

                     var dd = parseInt(d)+parseInt(txt);

                    document.getElementById('derg').value=dd;
                    var a=dd+'deg';


                  document.getElementById('tdiv4').style.MozTransform = 'rotate('+a+')';
         }

                 </script>




           <div id="tdiv4" class="square" >this is tdiv4</div>

          <input type="hidden" value="" id="derg">
         <input type="button" onclick="change(15)" value="change"/>

Answer 3

首先，使用CSS3的read an article转换为旋转文本。

下一步：

使用JavaScript在按钮上注册点击处理程序。
在您的点击处理程序中，使用JavaScript直接修改相关文本上的必要CSS属性，或者根据计算的角度应用新的CSS类（对于您希望支持的每个角度使用预定义的CSS类）。 / LI>

Answer 4

jQuery Animations这可以做任何你想要的事情

按钮单击事件时旋转文本

4 个答案: