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:

       

       

       

      sym.$("card-container").addClass("front");

      sym.$("card-container").toggle(

                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,


      Davide