1 Reply Latest reply: Jul 19, 2013 12:09 PM by robboerman RSS

    Edge :: Jquery Transformation / css3 3D

    Departure Community Member
    Departure Jul 18, 2013 2:37 PM

      How can I use "Jquery Transformation" or "CSS3 3D" inside Edge-Animate coding environment?

       

      Examples of what i m looking for:

      http://www.w3schools.com/css3/css3_3dtransforms.asp

      https://github.com/heygrady/transform/wiki

       

      So far the only way i know to apply transform is to animate css attributes as highlighted on Css panel (left side),

      Ex:This is the only way i know to scale something :

       

      symbol.$("ball").css({transform: 'scale(' + 1.2 + ')'})

      symbol.$("ball").css({'-moz-transform': 'scale(' + 1.2 + ')','-webkit-transform': 'scale(' + 1.2+ ')'});

       

      Imagine i want to create effects such as Flipping a Card or some 3d stuff that requires skew and 3d rotation.

        • 1. Re: Edge :: Jquery Transformation / css3 3D
          robboerman Community Member
          robboerman Jul 19, 2013 12:09 PM (in response to Departure)

          hi try this.

           

          sym.$("Ball").css({"transform" : "rotateY(180deg)",

          "-webkit-transform" : "rotateY(180deg)", "background" : "#0000FF",

          "-webkit-transition" : "all 0.5s ease" });

           

          that should rotate it like a card and change the background, you can put it on click or mouseover or anything

          i hope this solved your problem