www.webdeveloper.com
Results 1 to 4 of 4

Thread: rotate an object

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    44

    rotate an object

    i am trying to rotate an object continuously.it does rotate one time but i cant make it continuous.please help
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    .hmm{
        height:60px;
        width:100px;
        border:1px solid black;
        background-color:red;
        }
    	#fly{
    		-webkit-transition:-webkit-transform 2s ease;
    	}
    </style>
    <script>
    function flyit(box){
    	var fly=document.getElementById(box);
    	
    	fly.style.webkitTransform="rotate(360deg)";
    var rotate=setTimeout(flyit(box),1000);
    	
    	
    }
    
    </script>
    </head>
    
    <body>
    <div id="fly" class="hmm">
    <script>flyit('fly')</script>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264

    Arrow

    It's perhaps difficult to see a rotation of 360░ which do not really change the shape !
    Try with 1, 2 or three degres, like this :

    Code:
    function flyit(box){
     	var fly=document.getElementById(box);
     	fly.style.webkitTransform="rotate(1deg)";
    	var rotate=setTimeout(flyit(box),1000);
    }
    Otherwise use HTML5 canvas like on this page which rotate a M˘bius surface (more exactly a M÷bius strip).
    Last edited by 007Julien; 11-16-2013 at 02:34 AM.

  3. #3
    Join Date
    Nov 2013
    Posts
    44
    i meant i want to spin the object .what should i do?the code you given isn't working

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Search the right form ! This CSS3 form is browser dependant (see for example w3scholls.com CSS3 2D transform)...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles