在按鈕點擊事件時旋轉文本

我需要在點擊按鈕時以不同角度旋轉文本。在按鈕點擊事件時旋轉文本

我需要兩個按鈕，一個是順時針移動文本，另一個是逆時針移動文本。

2010-11-17 Chauhan

請不要標記這是'[PHP]'，因爲PHP不能被用於此目的。另一方面，CSS可以。使用適當的標籤可以爲您提供更好的答案 – 2010-11-17 07:36:34

這一個適合你：http://stackoverflow.com/questions/37452477/rotate-div-text-after-clicking-on-button-using-jquery-and-css – 2017-05-03 09:43:45

首先，read an article上使用CSS3變換來旋轉文本。

使用JavaScript註冊點擊您的按鈕處理程序。
在您的點擊處理程序中，使用JavaScript直接修改相關文本上必需的CSS屬性，或者基於計算出的角度應用新的CSS類（爲您希望支持的每個角度預定義CSS類）。

來源

2010-11-17 07:14:15 Phrogz

我已經研究了使用CSS的旋轉，但我在運行時需要這意味着訪問者。當用戶點擊按鈕時，它以特定角度順時針移動 – Chauhan 2010-11-17 07:18:49

JavaScript在訪問者的Web瀏覽器上執行'運行時'。網頁可以是動態的。當用戶點擊按鈕時，JavaScript會操縱頁面上對象的屬性，並且瀏覽器會立即爲用戶更新結果。這不會回到服務器。 – Phrogz 2010-11-17 07:20:42

您可能會發現這篇文章有用：http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html – Phrogz 2010-11-17 07:23:12

jQuery Animations那會做任何事情，你想

來源

2010-11-17 07:14:59

哇，jquery動畫已經如此兼容css3 – wizztjh 2010-11-17 07:25:11

試試這個：

HTML：

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

CSS（提示：使用變換原點來控制旋轉錨點，這裏只用於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的文件上的準備：

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

看看這裏：http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/

更新：每次點擊遞增20度：http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5/

來源

2010-11-17 07:57:17

你好當我點擊旋轉按鈕時，我已經試過這個代碼它只是移動文本一次。我需要像當我第一次點擊時它的移動20度進一步增加第二次點擊 – Chauhan 2010-11-17 08:25:03

這將做它然後http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/4/ – 2010-11-17 09:13:32

它只適用於-webkit，但你明白了，你也不需要任何css – 2010-11-17 09:18:08

我給我自己的question.I的答案找到只是因爲你們，我想要的就是這些。你們都幫助過我。

感謝

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

來源

2010-12-08 05:49:12 Chauhan

在按鈕點擊事件時旋轉文本

回答

相關問題