6

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.

2

4 Answers 4

4

try this:

html:

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

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:

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

check it out here: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/


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

3
  • Hello I have tried this code its just move text one time when we click rotate button.i need like when when i click first time its move 20 degree further increment on second time of click
    – Chauhan
    Nov 17, 2010 at 8:25
  • it only works on -webkit, but you get the idea, also, you don't need any of the css anymore Nov 17, 2010 at 9:18
  • hey, i was sleeping, what's the issue? Nov 17, 2010 at 17:32
3

I am giving the answer of my own question.I find out the exactly what I want just because of you guys.You all helped me alot.

Thanks

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

jQuery Animations that'll do just about anything you want

0
2

First, read an article on using CSS3 transforms to rotate text.

Next:

  1. Use JavaScript to register click handlers on your buttons.
  2. In your click handlers, use JavaScript to either directly modify the necessary CSS attributes on the text in question, or apply a new CSS class based on a computed angle (with predefined CSS classes for every angle you wish to support).
6
  • I have study about rotation using css but i need this at run time mean for visitors.when user click on button its move clockwise at particular angle
    – Chauhan
    Nov 17, 2010 at 7:18
  • JavaScript executes 'at run time' on the visitor's web browser. Web pages can be dynamic. When the user clicks the button, JavaScript manipulates the properties of the objects on the page and the browser updates the result immediately for the user. This does not go back to the server.
    – Phrogz
    Nov 17, 2010 at 7:20
  • You might find this article helpful: zachstronaut.com/posts/2009/02/17/…
    – Phrogz
    Nov 17, 2010 at 7:23
  • I have clarified my answer to indicate that JavaScript is what you would be doing this in.
    – Phrogz
    Nov 17, 2010 at 7:25
  • <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>
    – Chauhan
    Nov 17, 2010 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.