14

Is it possible to rotate a div element using Javascript & NOT using HTML 5?

If so what attributes of the element do I set/change to make it rotate? Ie, div.what?

PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

Mach
  • 171
  • 1
  • 1
  • 5

6 Answers6

18

Old question, but the answer might help someone...

You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).

Example of how to rotate a element 45 degrees using CSS:

.example {
    -webkit-transform: rotate(45deg); /* Chrome & Safari */
    -moz-transform: rotate(45deg); /* Firefox */
    -ms-transform: rotate(45deg); /* IE 9+ */
    -o-transform: rotate(45deg); /* Opera */
    transform: rotate(45deg); /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}

Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.

I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

Christian
  • 27,509
  • 17
  • 111
  • 155
Iain Collins
  • 6,774
  • 3
  • 43
  • 43
  • @Zanthel, exactly! check out my answer. css3 to IETransform. The guy is a genius. – Ashwin Krishnamurthy Dec 09 '11 at 08:07
  • In the filter method where are you coming up with those values.. `M11=0.7071...`? What if I want to use 90deg instead, how do I calculate the new values? – The Muffin Man Nov 05 '12 at 22:57
  • 1
    Have a look at the URL posted by @Ashwin above, it can calculate them for you (there is also a link to a blog post about it on that page). Another option is css3pie.com – Iain Collins Nov 06 '12 at 10:38
  • 1
    You can use [this link](http://www.boogdesign.com/examples/transforms/matrix-calculator.html) to calculate the IE Matrix values: – codechurn Mar 22 '15 at 19:50
4

Yes, it is possible to rotate a div not using HTML5, but using CSS3.

You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).

For more info, Google for: css rotate

If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.

rsp
  • 107,747
  • 29
  • 201
  • 177
4

I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts

Ashwin Krishnamurthy
  • 3,750
  • 3
  • 27
  • 49
  • 1
    +! Thanks for posting a link to something that auto-generates the Matrix Transforms, was coming back here to do that! :) – Iain Collins Dec 10 '11 at 12:49
0

You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.

http://kaisarcode.com/javascript-rotate

Daimon Kaisar
  • 1
  • 3
    Welcome to Stack Overflow! Please note that bare links to your own website/product are not encouraged here for two reasons; First, an answer should be posted as a self-contained answer, not a mere link to an external site. Second, self-promotion tends to be frowned upon here, and often is flagged as spam (especially if there is no disclosure that you are linking to your own site/product). – Andrew Barber Jan 23 '13 at 02:01
0

If you are looking for a way to do it instantaneously, than you can use element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.

If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s"; element.style.transform = "rotateZ(90deg)";

cs1349459
  • 911
  • 9
  • 27
0

Below is my Java script code to rotate div element. here I've a text box inside div element if user enters rotate element will start to rotate if user enters stop element will stop.

function OnKeyUp() {
      
      let x = document.getElementById("cmd");
      x.value = x.value.toUpperCase();

        if (x.value.includes('ROTATE')) {
            Rotate('');
        }

        if (x.value.includes('STOP')) {
            //Rotate('stop');
            location.reload()
        }
    
    }
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    async function Rotate(cmd) {
        for (i = 0; i <= 1800; i++) {

            var deg = 'rotate(' + i/5+ 'deg)'
            document.querySelector('.box').style.transform = deg;
            await sleep(1);
            if (i == 1800) {
                i = 0;
            }
            if (cmd == 'stop') {
                i = 360;
            }
        }
    }
<style>
    .box {
          rotate: 0deg;
         }
    </style>
<div class="box">
<label for="cmd">Command:</label>
  <input type="text" id="cmd" name="cmd" onkeyup="OnKeyUp()">
</div>
Mohammed Parvez
  • 1
  • 1