22 Replies Latest reply on May 8, 2014 11:27 AM by GMAN1955

    How to "Flip (like a card) image?

    shadowfax007 Level 1

      Hello all-

       

      I'm working on a project and I need to have a row of images "Flip" one at a time in order(like a card).  It can be done with CSS3 (using rotation and opacity) but I don't know how to add custom CSS code to an edge document.

       

      I found this demo using Edge and "Greenstock" Javascript but don't have a clue what to do to make it work or if this is a good idea going forward:

      http://www.gannon.tv/edge_demos/3dcardflip/

       

      Is this something that is really that hard to do or am I just missing something (I'm sure more likely the answer!)?

       

      Any help would be appreciated!

        • 1. Re: How to "Flip (like a card) image?
          joel_pau Level 5

          Hi,

           

          Do you want something as this website: http://css3.bradshawenterprises.com/flip/?

          Do you need a demo file?

          • 2. Re: How to "Flip (like a card) image?
            resdesign Adobe Community Professional & MVP

            Great link, Joel!

            • 3. Re: How to "Flip (like a card) image?
              shadowfax007 Level 1

              Thanks Joe-

               

              Yes, that is what I am trying to acomplish!

               

              I just asked this in response to another thread but I'll ask here as well since it is pertinant to the discussion:

               

              What is the best way to go about adding external style sheets to an Edge project?

               

              I am pretty adept at css, so adding styles sounds like a good idea if it is something I cannot easily add via the Edge interface.  Are there any pros or cons to doing this?

               

              I already have an external style sheet adding some custom fonts to the project; can I just add my own styles to this file, or is it better to add to the Edge generated style sheets (I haven't looked but there must be some)?

               

              Also, it was suggested to add external css files via javascript and the yepnope command, which seems simple enough even to me as  a java script neofite :-)

               

              Again, thank for the help!

               

              James

              • 4. Re: How to "Flip (like a card) image?
                shadowfax007 Level 1

                I did forget to ask this:

                 

                Is this type of behaviour able to be done using the Edge interface as opposed to external styles?

                 

                I'd like to do everything I can within th Edge interface, mostly to learn how and if possible :-)

                 

                James

                • 5. Re: How to "Flip (like a card) image?
                  AmintaAdobe

                  Hi,

                   

                  I've made a couple of monts ago a simple Edge+external Css project to flip card, you can find it at this link:

                   

                  http://www.terredainventare.it/FlipEdge.zip

                   

                   

                  Davide

                  • 6. Re: How to "Flip (like a card) image?
                    joel_pau Level 5

                    You can also use this code to add external style sheets:

                    $("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"css/flip3D.css" }).appendTo("head");

                     

                    Note: microsoft browser do not support preserve-3d (css property).

                    So, you can use 2 style sheets with a conditional statement using $. browser().

                    $.browser uses navigator.userAgent

                     

                    if (...) { $("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"css/flip3d.css" }).appendTo("head"); }

                    else { $("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"css/flip3d_IE.css" }).appendTo("head"); }

                    1 person found this helpful
                    • 7. Re: How to "Flip (like a card) image?
                      shadowfax007 Level 1

                      Davide & joel_pau and others that have helped-

                       

                      Thank you once again for these great, quick responses (and code examples)!

                       

                      As for IE, I can't remember the days of NOT having a different style sheet for IE (Am I dreaming that IE9 may resolve this ancient pain for designers and developers?)!

                       

                      This forum is turning out to be a fantastic resource, especially until there is a definitive manual for Edge and even then I'm sure I'll always keep up with this forum - hopefully moving into more of an "answering" mode instead of all my questions :-)

                       

                      I seem to be learing Edge very quickly, thanks to the Edge team and a great interface and program!

                       

                      Looking through the files created by Edge, I'm amazed at how, for the most part, the code created seems VERY clean and lean.  I switched to hand coding many years ago, mainly for sloppy code created in old (old!) programs such as GoLive and earlier versions of Dreamweaver (Macromedia days!) and am just now "re-visiting" programs such as Edge and Dreamweaver, delighted at the clean code created, as well as the power behind these programs now :-)

                       

                      Again, thanks to all for the help!

                       

                      James

                      • 8. Re: How to "Flip (like a card) image?
                        elainecc Adobe Employee

                        Hi, James-

                         

                        Thanks for the kind words!  I've forwarded your note to the rest of the team.

                         

                        Cheers,

                         

                        -Elaine

                        • 9. Re: How to "Flip (like a card) image?
                          shadowfax007 Level 1

                          Elaine-

                           

                          You are welcome and thank you for forwarding this - I thought there may be someone from Adobe lurking here on the forums

                           

                          The "kind words" were well deserved - I didn't say them for any other reason that they are true!

                           

                          My only "Beef" so far is we need the cloud to use Edge - but I've heard that will change so hopefully it will be a mute point

                           

                          Other than that, for a "new" program (and in  way "relatively" new technology - with IE9, browsers are finally on the edge of fully supporting HTML5 and CSS3 to a very good extent!), Adobe Edge is absolutely incredible!  I know there are others that try to do the same thing out there (and I haven't looked at them all) but Adobe Edge is by far the best out there that I have looked at (the other two I looked at only took a few minutes to see their shortcomings compared to Edge!).

                           

                          I honestly don't know how your programmers did it but you took something that I imagine is a bit complex with all the variables (writing the css code from the interface) and were able to turn it into what I consider some of the cleanest code I've seen - A HUGE thing for any good designer or developer!

                           

                          I want to let you and the entire Edge team know that this is, by far, the best piece of "New" software I think I have ever seen - It almost acts like a "Version 2" (or even Version 3!)" program! 

                           

                          I am, every day, learning new things to do with Edge and still amazed at the code rendered by Edge.  I go on about this but it is such a HUGE thing for any good developer; clean code isn't just a "Designer's Ego" thing; It makes it that much easier to troubleshoot or add additions quickly and easily!

                           

                          I am your "Middle of the road" designer.  Although I've been doing this for so long and have been in the "development" side, working with Mysql and such more than design, I don't have much experience with the newer versions (Since Adobe took over Dreamweaver!), programs such as Dreamweaver, Flash or Edge.  The fact that I can jump in and start creating shows the power and design qualities that have gone into creating Edge ; I am eternally grateful for all the hard work!!!

                           

                          Thank you to the Adobe EDGE team!

                           

                           

                          James Sheffer,

                           

                          The HigherPowered Team!

                           

                          support@higherpowered.com          sales@higherpowered.com

                          Web Design & Development             http://www.higherpowered.com

                          phone:  469-256-0268                      

                          "We help businesses succeed on the web!"

                          • 10. Re: How to "Flip (like a card) image?
                            shadowfax007 Level 1

                            Hello everyone-

                             

                             

                            Ok.  I asked this last week but decided to get the rest of the project for this page completed before tackling the "flipping" of images :-)

                             

                             

                            Joel posted this link (above) that is exactly what I'm looking for:

                            http://css3.bradshawenterprises.com/flip/

                             

                            Here's my example with CSS in the header of the page as well as the javascript code from Edge for the link above:

                            http://higherpowered.com/css/cardFlip2/index.html

                             

                            I'm able to write this in CSS and get it to work on a test page with no problems (Not using Edge).  I do have a slightly "off-topic" question about this. I have 8 images aligned horizontally, each at w: 160px X H: 215px.   I want them to flip, in order from left to right at 200ms increments. Using the example from the link, I'm sure there is a way to write this using the "nth-child" selector (instead of making copies of the div's with names like flipcard1, flipcard2, flipcard3, etc...).  If someone could post a brief example of how this would work with CSS and the nth-child selector It would be greatly appreciated, just to get me going at least :-)

                             

                            resdesign also pointed out the use of "yepnope" and "Greensock" to do some of these type of things in a demo.

                             

                            I'd prefer to stay working in the timeline with the images as there are several of these "image-flips" that will occur one after another (and I'm more familiar with the "timeline" that javascript and find it easier to read and use but that just a matter of getting off my butt and learning - I need to get caught on the scripting aspect of Edge anyways!).

                             

                            So here are a few questions I have:

                             

                             

                            1. Edge doesn't seem to support rotation on the Y axis in the interface (or at least I couldn't find a way except for scripting it).  Am I correct that Edge only lets you work with rotation on the X axis?

                             

                             

                            2. When publishing with static HTML, I assume I can add my own HTML code "outside" the stage div but can I add additional HTML "inside" the stage" div when working in an editor?  My stage in this test project encases the entire web page and I can see where I may want to add a few things, especially HTML tags, if for nothing else than to enhance the SEO aspects of the page.

                             

                             

                            3. Are there any tricks outside of publishing with static HTML to help SEO?

                             

                             

                            Sorry for the long post and thanks - any and all help is greatly appreciated :-)

                             

                             

                            James

                            • 11. Re: How to "Flip (like a card) image?
                              resdesign Adobe Community Professional & MVP

                              Did you check Chris Gannon's website? It does use greensock. But he has demo files for Edge.

                              http://chrisgannon.wordpress.com/

                              • 12. Re: How to "Flip (like a card) image?
                                shadowfax007 Level 1

                                resdesign-

                                 

                                Thank you, yes I did. Actually, the link I published was from this page(incrediable website, BTW).

                                 

                                I'm trying to determine, among other things:

                                 

                                1. Is using Greensock the best way to go, or is JQuery a better way to go as far as scripting?

                                 

                                2. Is there a way to set the "Y" axis in the Edge interface, or does it only work with the "X" axis when it comes to rotations(thus allowing me to use the Edge interface)?

                                 

                                3. would it better to add an external stylesheet (thanks to those who showed me how to easily add an external stylesheet!) with the code for the "flip card" process?

                                 

                                Again, thaks for everyone for helping on this!!!

                                 

                                James

                                 

                                4. In essence, this is what I'm trying to do:

                                 

                                I have an image - W:1280px X H: 215px.  I have 8 "slices" (each W:160px X H: 215px) that I want to sit "on top of" the original image (This is a banner, with actually 6 "sets" of 8 images sitting on top, each being called, in order, based on the timeline).

                                 

                                I apologize for my explaination (I try hard to make sense of this!) - Does that make more sense?

                                • 13. Re: How to "Flip (like a card) image?
                                  resdesign Adobe Community Professional & MVP

                                  I am doing some tests for you currently.

                                  I could not get the y-axis to work in plain css.

                                  I am trying some other ways and will get back to you as soon as I have a positive result if any.

                                  • 14. Re: How to "Flip (like a card) image?
                                    resdesign Adobe Community Professional & MVP

                                    OK. I have it working with the flip pluggin on an element named

                                    card

                                     

                                     

                                    yepnope(

                                    {

                                              nope:[

                                              'js/jquery.flip.min.js',

                                              'js/jquery-ui-1.9.2.custom.min.js',

                                              'css/jquery-ui-1.9.2.custom.min.css'

                                     

                                     

                                              ],

                                              complete: init

                                    }

                                    );

                                     

                                     

                                     

                                     

                                    function init() {

                                              sym.$("card").click(function(){

                                                        sym.$("card").flip({

                                                                  direction:'tb',

                                                                  content:'this is my new content'

                                                        })

                                     

                                              });

                                     

                                     

                                    }

                                    • 15. Re: How to "Flip (like a card) image?
                                      resdesign Adobe Community Professional & MVP

                                      The css to rotate y work in css. Here it is for an element called card2 - work for x too - it iscommented out here.

                                       

                                      sym.$('card2').click(function(){

                                      sym.$('card2').html('this is a test');

                                      sym.$('card2').css('background-color','blue');

                                      //  rotate x

                                      /*

                                      sym.$('card2').css('transform', 'perspective(300px) rotateX(25deg)');

                                      sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateX(25deg)');

                                      sym.$('card2').css('-o-transform', 'perspective(300px) rotateX(25deg)');

                                      sym.$('card2').css('-moz-transform', 'perspective(300px) rotateX(25deg)');

                                      sym.$('card2').css('transform', 'perspective(300px) rotateX(25deg)');

                                      */

                                      //rotate y

                                      sym.$('card2').css('transform', 'perspective(300px) rotateY(25deg)');

                                      sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateY(25deg)');

                                      sym.$('card2').css('-o-transform', 'perspective(300px) rotateY(25deg)');

                                      sym.$('card2').css('-moz-transform', 'perspective(300px) rotateY(25deg)');

                                      sym.$('card2').css('transform', 'perspective(300px) rotateY(25deg)');

                                       

                                       

                                      });

                                      • 16. Re: How to "Flip (like a card) image?
                                        resdesign Adobe Community Professional & MVP

                                        Complete code for card2 - rotates porperly with just jquery/css

                                         

                                        sym.$('card2').click(function(){

                                        sym.$('card2').css('-webkit-transform-style',' preserve-3d');

                                        sym.$('card2').css('-webkit-transition',' all 1.0s linear');

                                        sym.$('card2').html('this is a test');

                                        sym.$('card2').css('background-color','blue');

                                        //  rotate x

                                        /*

                                        sym.$('card2').css('transform', 'perspective(300px) rotateX(180deg)');

                                        sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateX(180deg)');

                                        sym.$('card2').css('-o-transform', 'perspective(300px) rotateX(180deg)');

                                        sym.$('card2').css('-moz-transform', 'perspective(300px) rotateX(180deg)');

                                        sym.$('card2').css('transform', 'perspective(300px) rotateX(180deg)');

                                        */

                                        // rotate y

                                        sym.$('card2').css('transform', 'perspective(300px) rotateY(180deg)');

                                        sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateY(180deg)');

                                        sym.$('card2').css('-o-transform', 'perspective(300px) rotateY(180deg)');

                                        sym.$('card2').css('-moz-transform', 'perspective(300px) rotateY(180deg)');

                                        sym.$('card2').css('transform', 'perspective(300px) rotateY(180deg)');

                                             

                                        });

                                        • 17. Re: How to "Flip (like a card) image?
                                          resdesign Adobe Community Professional & MVP

                                          Here is the sample file with both pluggin and just jquery/css. (seconds flips only one for now.)

                                          There is an extra generic transform on the y axis that should be deleted (1st line and last lines are the same - sorry!).

                                           

                                          https://www.box.com/s/u1k9pkpat222suoqjlor

                                          1 person found this helpful
                                          • 18. Re: How to "Flip (like a card) image?
                                            resdesign Adobe Community Professional & MVP

                                            OK - here with the mouseover and on mouseout the card returns to original position. Again I am leaving the x position commented out.

                                             

                                            sym.$('card2').mouseover(function(){

                                                      sym.$('card2').css('-webkit-transform-style',' preserve-3d');

                                                      sym.$('card2').css('-webkit-transition',' all 1.0s linear');

                                                      sym.$('card2').html('this is a test');

                                                      sym.$('card2').css('background-color','blue');

                                            //  rotate x

                                            /*

                                            sym.$('card2').css('transform', 'perspective(300px) rotateX(180deg)');

                                            sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateX(180deg)');

                                            sym.$('card2').css('-o-transform', 'perspective(300px) rotateX(180deg)');

                                            sym.$('card2').css('-moz-transform', 'perspective(300px) rotateX(180deg)');

                                            sym.$('card2').css('transform', 'perspective(300px) rotateX(180deg)');

                                            */

                                            // rotate y

                                                      sym.$('card2').css('transform', 'perspective(300px) rotateY(180deg)');

                                                      sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateY(180deg)');

                                                      sym.$('card2').css('-o-transform', 'perspective(300px) rotateY(180deg)');

                                                      sym.$('card2').css('-moz-transform', 'perspective(300px) rotateY(180deg)');

                                             

                                             

                                             

                                             

                                            });

                                            sym.$('card2').mouseout(function(){

                                                      sym.$('card2').css('-webkit-transform-style',' preserve-3d');

                                                      sym.$('card2').css('-webkit-transition',' all 1.0s linear');

                                                      sym.$('card2').html('this is a test');

                                                      sym.$('card2').css('background-color','blue');

                                            //  rotate x

                                            /*

                                            sym.$('card2').css('transform', 'perspective(300px) rotateX(-180deg)');

                                            sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateX(-180deg)');

                                            sym.$('card2').css('-o-transform', 'perspective(300px) rotateX(-180deg)');

                                            sym.$('card2').css('-moz-transform', 'perspective(300px) rotateX(-180deg)');

                                            sym.$('card2').css('transform', 'perspective(300px) rotateX(-180deg)');

                                            */

                                            // rotate y

                                                      sym.$('card2').css('transform', 'perspective(300px) rotateY(-180deg)');

                                                      sym.$('card2').css('-webkit-transform', 'perspective(300px) rotateY(-180deg)');

                                                      sym.$('card2').css('-o-transform', 'perspective(300px) rotateY(-180deg)');

                                                      sym.$('card2').css('-moz-transform', 'perspective(300px) rotateY(-180deg)');

                                               

                                            });

                                            1 person found this helpful
                                            • 19. Re: How to "Flip (like a card) image?
                                              shadowfax007 Level 1

                                              redesign-

                                               

                                              Thank you for looking into this and all the work!

                                               

                                              I had no idea that rotating an image like this would turn into so much work and complexity!

                                              Even with the files from Chris Gannon, things are a bit complex.  As soon as I added some movement to the images, it broke in the browsers.

                                               

                                              I think I'm going to have to change my initial idea of rotating these images the way I wanted them to work :-)

                                              At least now I have a much better understanding of adding jQuery to my Edge projects and on another project may play with that some more!

                                              • 20. Re: How to "Flip (like a card) image?
                                                resdesign Adobe Community Professional & MVP

                                                No problem. This is good practice for me too.

                                                • 21. Re: How to "Flip (like a card) image?
                                                  Chris Gannon Level 1

                                                  If it's any help you can purchase my 3D Card Flip on CodeCanyon. It's an Edge Animate template (nice and easy to import) and contains simple instructions on how to edit it to suit your design (and it's only $4). I hope it's useful.

                                                  • 22. Re: How to "Flip (like a card) image?
                                                    GMAN1955

                                                    This is great info - but I'm still a bit confused. A bit of a noob here.

                                                     

                                                    Here's my situation in Edge Animate. I have three columns of 6 boxes. What I'd like to have happen, is when the user mouses over a box, it will flip in perspective to reveal the opposite side. On mouseout - have it flip back. I've set it up so the code on the stage, on creationComplete, looks like this:

                                                     

                                                    $(sym.lookupSelector('imageHolder_A1')).css('background-image','url(images/initial_A1.png) ');

                                                    $(sym.lookupSelector("imageHolder_A2")).css('background-image','url(images/initial_A2.png) ');

                                                    $(sym.lookupSelector("imageHolder_A3")).css('background-image','url(images/initial_A3.png) ');

                                                    $(sym.lookupSelector("imageHolder_A4")).css('background-image','url(images/initial_A4.png) ');

                                                    $(sym.lookupSelector("imageHolder_A5")).css('background-image','url(images/initial_A5.png) ');

                                                    $(sym.lookupSelector("imageHolder_A6")).css('background-image','url(images/initial_A6.png) ');

                                                     

                                                     

                                                    $(sym.lookupSelector("imageHolder_B1")).css('background-image','url(images/initial_B1.png) ');

                                                    $(sym.lookupSelector("imageHolder_B2")).css('background-image','url(images/initial_B2.png) ');

                                                    $(sym.lookupSelector("imageHolder_B3")).css('background-image','url(images/initial_B3.png) ');

                                                    $(sym.lookupSelector("imageHolder_B4")).css('background-image','url(images/initial_B4.png) ');

                                                    $(sym.lookupSelector("imageHolder_B5")).css('background-image','url(images/initial_B5.png) ');

                                                    $(sym.lookupSelector("imageHolder_B6")).css('background-image','url(images/initial_B6.png) ');

                                                     

                                                     

                                                    $(sym.lookupSelector("imageHolder_C1")).css('background-image','url(images/initial_C1.png) ');

                                                    $(sym.lookupSelector("imageHolder_C2")).css('background-image','url(images/initial_C2.png) ');

                                                    $(sym.lookupSelector("imageHolder_C3")).css('background-image','url(images/initial_C3.png) ');

                                                    $(sym.lookupSelector("imageHolder_C4")).css('background-image','url(images/initial_C4.png) ');

                                                    $(sym.lookupSelector("imageHolder_C5")).css('background-image','url(images/initial_C5.png) ');

                                                    $(sym.lookupSelector("imageHolder_C6")).css('background-image','url(images/initial_C6.png) ');

                                                     

                                                    Each box has an initial image stored in the 'images' folder for the EA project. Right now, when the user mouses over it swaps out the initial image for a different image. Those images are also stored in the images folder. The code on each 'imageholder' object on mouseover is:

                                                    $(sym.lookupSelector("imageHolder_A1")).css('background-image','url(images/over_A1.png)');

                                                     

                                                    And the code on each 'imageholder' object on mouseout is:

                                                    $(sym.lookupSelector("imageHolder_A1")).css('background-image','url(images/initial_A1.png) ');

                                                     

                                                    But, what I'd like to do is have the image flip 180 degrees in perspective on mouseover and then flip back on mouseout.

                                                     

                                                    I tried setting it up so when the user mouses over - it goes to a place in the time line and shrinks in horizontally from both edges and then the second image expands from the cent to the dimensions of the first image and it worked. But then I tried to use the Play Reverse on mouseout. But found that when the mouse moved on the image - the image kept growing and shrinking and wouldn't stop

                                                     

                                                    Is there a way, using my images, to do the perspective flip and display the new image?