5 Replies Latest reply on Aug 18, 2014 1:11 PM by heathrowe

    Scale simple rectangle with .css on hover

    Smarc

      Good evening dear members,
      I uploaded you a sample project to illustrate the problem. (Dropbox - Example.zip)
      Over all I only want to resize a rectangle with a hover effect. However, the problem arises that the size of the rectangle with scale = 1 changes?!

      I create a rectangle "button" and give the "button" as mouseout-action the following code:


      var object = sym $ ("button").
      rescale = 1;

      object.css ('transform', 'scale (' + rescale + ')');
      object.css ('o-transform', 'scale (' + rescale + ')');
      object.css ('- ms-transform', 'scale (' + rescale + ')');
      object.css ('- webkit-transform', 'scale (' + rescale + ')');
      object.css ('- moz-transform', 'scale (' + rescale + ')');
      object.css ('- o-transform', 'scale (' + rescale + ')');
      object.css ('z-index', '1');


      I don´t understand why
      the rectangle is changing!

      Maybe you can explain it to me :-)


      Best regards and many thanks

      Marc

        • 1. Re: Scale simple rectangle with .css on hover
          heathrowe Most Valuable Participant

          Try this (note the shorthand notation compared to your multiple .css calls)

           

          object.css({

                      'transform': 'scale(' + rescale + ')',

                      '-ms-transform': 'scale(' + rescale + ')',

                      '-moz-transform': 'scale(' + rescale + ')',

                      '-webkit-transform': 'scale(' + rescale + ')',

                      '-o-transform': 'scale(' + rescale + ')',

                      'z-index':'1'

                     });

           

          Darrell

          • 2. Re: Scale simple rectangle with .css on hover
            Smarc Level 1

            Hi Darrell,

             

            thanks for your reply!

            This makes the code easier to read and understand...  but my problem remains:


            Why does the rectangle gets smaller when the variable rescale = 1, shouldn´t it stay with same size?

            • 3. Re: Scale simple rectangle with .css on hover
              heathrowe Most Valuable Participant

              It shouldn't get smaller, in fact at a value of 1, it should not change at all because 1 equates to 100% of the original.

               

              Change the value to a higher number, like 2, for example. Which says 'transform to 200% of the original'.

               

              var object = sym.$("button");

              rescale= 2;

               

              object.css({

                          'transform': 'scale(' + rescale + ')',

                          '-ms-transform': 'scale(' + rescale + ')',

                          '-moz-transform': 'scale(' + rescale + ')',

                          '-webkit-transform': 'scale(' + rescale + ')',

                          '-o-transform': 'scale(' + rescale + ')',

                          'z-index':'1'

                         });

               

              To get a better understanding of how the values work and there equivalents.

              - Select any element on your Stage;

              - Then toy with the Transform property (see capture);

              - as captured a transform at 167% equates to a value of 1.67

               

              resccale.jpg

               

              hth

              Darrell

              • 4. Re: Scale simple rectangle with .css on hover
                Smarc Level 1

                Hello Darrell,
                thank you for your detailed reply! Your picture was just right for me...I have not paid attention to the set value

                Thank you for your kind help !

                Until my next issue


                Marc

                • 5. Re: Scale simple rectangle with .css on hover
                  heathrowe Most Valuable Participant

                  You are welcome

                   

                  Darrell