6 Replies Latest reply on Apr 22, 2015 6:06 AM by migro1982

    CSS rotate with origin

    migro1982 Level 1

      I'm new in Edge. Need to rotate a wheel with the origin information. I set a button on my stage for the click event code I write this.

       

      var your_angle = 45;

       

      sym.$("Rad").css({

      '-ms-transform': 'rotate(' + your_angle + 'deg)',

      '-ms-transform-origin': '50% 50%',

      '-webkit-transform': 'rotate(' + your_angle + 'deg)',

      '-webkit-transform-origin': '50% 50%',

      'transform': 'rotate(' + your_angle + 'deg)',

      'transform-origin': '50% 50%',

      });

       

      But something are wrong. becose my wheel don't rotate in center.

       

      Anyone here to check my syntax?

        • 1. Re: CSS rotate with origin
          resdesign Adobe Community Professional & MVP

          You need to alternate single quotes and double quotes

           

          On Sat, Jan 3, 2015 at 6:15 PM, migro1982 <forums_noreply@adobe.com>

          • 2. Re: CSS rotate with origin
            joel_pau Level 5

            Hi,

             

            resdesign is traveling and cannot test your code.

            I copied and pasted your code here: rotateTemp.zip - Box and it runs. You don't have syntax errors.

            I tested webkit browsers, Firefox and IE 11.

            • 3. Re: CSS rotate with origin
              joel_pau Level 5

              Now, an update: rotateTemp.zip - Box I added a demo file about rotate using Edge timeline.

               

              You've got a test page here: A Pen by Louis Lazaris

              You can change css properties. For instance:

              .box {

                background: lightblue;

                width: 200px;

                height: 200px;

                margin: 20px auto;

                transition: transform 1s linear;

                transform-origin: 50% 50%;

              }

              • 4. Re: CSS rotate with origin
                migro1982 Level 1

                This code in Chrome work but in IE 11 don't work. Whats my wrong?

                 

                 

                 

                 

                tRotationRad=setInterval(RotationRad, 250);

                 

                   function getRotationDegrees() {

                  var matrix = sym.$("Rad").css("-webkit-transform") ||

                    sym.$("Rad").css("-moz-transform")    ||

                    sym.$("Rad").css("-ms-transform")     ||

                    sym.$("Rad").css("-o-transform")      ||

                    sym.$("Rad").css("transform");

                    if(typeof matrix === 'string' && matrix !== 'none') {

                        var values = matrix.split('(')[1].split(')')[0].split(',');

                        var a = values[0];

                        var b = values[1];

                        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

                    } else { var angle = 0; }

                    return angle;

                   }

                 

                 

                // Rotaion of the Wheel

                   function RotationRad(){

                   var your_angle = 45;

                   your_angle = getRotationDegrees() + 45;

                   sym.$("Rad").css({

                   '-ms-transform': 'rotate(' + your_angle + 'deg)',

                   '-ms-transform-origin': '50% 50%',

                   '-webkit-transform': 'rotate(' + your_angle + 'deg)',

                   '-webkit-transform-origin': '50% 50%',

                   'transform': 'rotate(' + your_angle + 'deg)',

                   'transform-origin': '50% 50%',

                   });

                   }

                • 5. Re: CSS rotate with origin
                  seano2o7 Level 3

                  Hi,

                   

                  I copied your original code into compositionReady and removed the "var" to allow the variable to be called from another element. I made the your code into a function in the stage called "Circle"

                   

                  your_angle = 45;

                   

                  sym.Circle = function() {

                  sym.$("Circle").css({

                  '-ms-transform': 'rotate(' + your_angle + 'deg)',

                  '-ms-transform-origin': '50% 50%',

                  '-webkit-transform': 'rotate(' + your_angle + 'deg)',

                  '-webkit-transform-origin': '50% 50%',

                  'transform': 'rotate(' + your_angle + 'deg)',

                  'transform-origin': '50% 50%',

                  });

                  }

                   

                  On the click of the Circle I ran the function,

                   

                  sym.Circle();

                   

                  and the code worked as expected. I added the text in to check to see if the circle changed.

                   

                  Screen Shot 2015-04-21 at 20.26.00.png

                   

                  I hope this helped.

                  • 6. Re: CSS rotate with origin
                    migro1982 Level 1

                    Please take a look of my sample file. I have the exact same source in edge and I use it in a normal HTML file. The HTML file work in IE 11 but the Edge sample work only in Chrome not in IE 11. https://drive.google.com/file/d/0B29heH7LlO5QTk5LRXl3THpmTzQ/view?usp=sharing

                    1 person found this helpful