3 Replies Latest reply on Oct 1, 2012 12:20 PM by AmintaAdobe

    Flip a card in Edge Animate with external Css file

    AmintaAdobe Level 1

      Hi all!


      I'm working in Edge Animate 1.0 to make it work a simple css / JQuery code to animate a 3D flip card.


      Here's what I did:


      1) I created an external Css file (recalledon CompostionReady,

      $("<link rel='stylesheet' type='text/css' href='my-css-file.css'>").appendTo("#Stage");

      ) with Css properties and class:



      #Stage_card {

          -webkit-transform-style: preserve-3d !important;

          -webkit-perspective: 800 !important;

          position: relative;






      #Stage_card-container {

          display: inline-block;

          text-align: justify;




      .back, .front {

          position: absolute !important;

          width: 100% !important;

          height: 100% !important;

          -webkit-backface-visibility: hidden !important;

          -webkit-transition: -webkit-transform 1s ease-in !important;



      .back {

                  -webkit-transform: rotateY(180deg) !important;

                  background-color: black !important;

                  overflow: hidden !important;




      .front {

                  background-color: blue !important;




      2) In Edge Ui, I've of course created the "card-container" and "card" nested DIVs


      3) On CompositionReady I've added this JQuery code to swap from the two sides of the card:






                function () {

                                                        if ($(this).hasClass("front"))


                                                        $(this).addClass("back").animate({-webkit-transform: "rotateY(0deg)"});



                                              function () {

                                              if ($(this).hasClass("back"))


                                                        $(this).addClass("front").animate({-webkit-transform: "rotateY(-180deg)"});





      But it doesn't work :-(


      Any hint?


      Many thanks in advance,