{"id":5927,"date":"2024-04-14T12:47:26","date_gmt":"2024-04-14T04:47:26","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5927"},"modified":"2024-04-14T12:47:26","modified_gmt":"2024-04-14T04:47:26","slug":"construct-flip-cards-using-transforms","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/construct-flip-cards-using-transforms\/","title":{"rendered":"Construct flip cards using transforms"},"content":{"rendered":"\n
\n

Throughout this tutorial, you will grasp the technique of crafting a basic card flip animation employing CSS 3D transformations \u2014 all without the necessity of manual coding. Card rotations serve as an effective means to introduce visual dynamism by unveiling supplementary information. For instance, implementing a card flip animation enables you to highlight more specifics about a merchandise you are marketing.\u00a0<\/p>\n

During this tutorial<\/strong>:<\/p>\n

    \n
  1. Establish a Segment and Division block to encompass your card picture components<\/li>\n
  2. Fashion card front and back picture components<\/li>\n
  3. Configure the offspring perspective on the ancestor element<\/li>\n
  4. Specify transformation properties on the card picture components<\/li>\n
  5. Animate the Card wrapper to pivot upon hover\u00a0<\/li>\n<\/ol>\n

    Erect a Segment and Division block to house your card picture components
    <\/h2>\n

    To kick things off, append a Segment<\/strong> on your page:\u00a0<\/p>\n

      \n
    1. Unveil the Insert elements <\/strong>pane located in the left toolbar<\/li>\n
    2. Drag a Segment<\/strong> onto your page<\/li>\n<\/ol>\n

      Position a Division block<\/strong> within the recently inserted Segment:<\/p>\n

        \n
      1. Extract a Division block<\/strong> from the Insert elements<\/strong>panel<\/strong> and embed it within the Segment <\/strong>previously established\u00a0<\/li>\n
      2. Assign a class to the Division block<\/strong> (e.g., \u201cCard wrapper\u201d)\u00a0<\/li>\n<\/ol>\n

        Fabricate card front and back picture components
        <\/h2>\n

        To insert and prepare your card picture components:\u00a0<\/p>\n

          \n
        1. Drop 2 separate Picture components <\/strong>from the Insert elements<\/strong> pane and situate them within the Card wrapper Division block<\/strong> recently created\u00a0<\/li>\n
        2. Select your initial picture and allot it a Class name of Card front. Redo this process for your subsequent picture, but designate it a Class name of Card back.\u00a0<\/li>\n<\/ol>\n

          To align images atop each other:\u00a0
          <\/h3>\nDesign<\/strong>, configure them to Display: Block<\/strong>. Ensure this adjustment is made for both pictures to have them overlapping.<\/p>\n
          \n
          <\/div>\n<\/figure>\nDivision block<\/strong>. Proceed to Spacing<\/strong> and arrange each image’s left and right margins to Auto<\/strong>. In case you desire a quicker method to center your images, click the Center element horizontally<\/strong> button for an automatic margin setup.<\/p>\n
          \n
          <\/div>\n<\/figure>\nDesign pane<\/strong> > Position<\/strong>, modify each image to Absolute<\/strong> and designate the Upper<\/strong> position.\u00a0<\/p>\n

          Having positioned your card images absolutely, both cards are piled. The Card back resides behind Card front.<\/p>\n\n

        3. Click on the Card front image<\/li>\n
        4. Navigate to Design<\/strong>\u00a0<\/li>\n
        5. Temporarily alter the Display<\/strong> to None<\/strong><\/li>\n<\/ol>\n

          Establish the progeny perspective on the parent element
          <\/h2>\nSegment<\/strong> previously included on your page? Since it functions as the parent component of the Card wrapper Div block, we must set the section\u2019s Offspring perspective<\/strong>. Enabling this perspective facilitates the display of our transformation in 3D.\u00a0<\/p>\n
            \n
          1. Select the Segment<\/strong><\/li>\n
          2. Access the Design pane<\/strong> > Impacts<\/strong> > 2D & 3D transformations<\/strong><\/li>\n
          3. Engage the 3 disclosure dots to unveil Transformation<\/strong> configurations<\/li>\n
          4. Beneath Offspring perspective<\/strong>, specify a Distance<\/strong> of 1234 pixels (you can always fine-tune this subsequently to match your desired 3D card flip appearance)\u00a0<\/li>\n<\/ol>\n

            Specify transformation attributes on the card image components
            <\/h2>\n\n
          5. Within the Design pane<\/strong>, proceed to Impacts<\/strong> and append a 2D & 3D transformation <\/strong>via the supplement icon\u00a0<\/li>\n
          6. Opt for Rotate<\/strong> and pivot the picture component by 180 degrees along the Y-axis\u00a0<\/li>\n<\/ol>\n\n
              \n
            1. Revisit Impacts<\/strong> > 2D & 3D transformations<\/strong><\/li>\n
            2. Click the 3 disclosure dots to exhibit Transformation <\/strong>configurations\u00a0<\/li>\n
            3. Designate Backface<\/strong> as Hidden<\/strong><\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n\n
            4. Select the Card front picture component<\/li>\n
            5. Adjust the Display<\/strong> to Block<\/strong>\u00a0<\/li>\n<\/ol>\n\n
            6. Single out the Card front component.<\/li>\n
            7. Head to Impacts <\/strong>> 2D & 3D transformations<\/strong>\u00a0<\/li>\n
            8. Click the 3 disclosure dots to unlock Transformation <\/strong>settings\u00a0<\/li>\n
            9. Determine Backface<\/strong> as Hidden<\/strong><\/li>\n<\/ol>\n

              Animate the card wrapper to pivot upon hover
              <\/h2>\n\n
                \n
              1. Access the Selector<\/strong> field for the Card wrapper Division block<\/strong>\u00a0<\/li>\n
              2. Opt for the Hover effect<\/strong> from the Selections<\/strong> drop-down list<\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n
                  \n
                1. Activate the Hover effect<\/strong> and navigate to Modifications <\/strong>> 2D & 3D transformations<\/strong>\u00a0<\/li>\n
                2. Hit the + sign and opt for the Rotate<\/strong> choice\u00a0<\/li>\n
                3. Adjust the Card wrapper to rotate 180 degrees on the Y-axis<\/li>\n<\/ol>\n
                  \n
                  <\/div>\n<\/figure>\n

                  <\/p>\n

                  In order to witness the flip animation you have created, revert back to the initial state of the Card wrapper Division block<\/strong> by selecting the Mode<\/strong> as Inactive<\/strong>.\u00a0<\/p>\n

                  Finally, incorporate a transition to the Card wrapper Division block.\u00a0<\/p>\n

                    \n
                  1. Access the Appearance panel<\/strong> > Modifications<\/strong> > Transitions<\/strong>\u00a0<\/li>\n
                  2. Append a new transition using the additional button\u00a0<\/li>\n
                  3. From the Variety<\/strong> drop-down list, opt for Modification<\/strong><\/li>\n
                  4. Include a duration of 1000 milliseconds\u00a0<\/li>\n<\/ol>\n

                    It’s time to rejoice \u2014 you have completed the task! Click on the preview button in the Designer to examine your card flip in motion. Hover over the card and exit to witness the card flip transition in action! Exhilarating!\u00a0\u00a0<\/p>\n

                    Associated resources<\/h5>\n
                      \n
                    • \u200dRead more about 2D and 3D Transformations<\/li>\n
                    • Discover more about 3D Perspective<\/li>\n<\/ul>\n

                      \u200d<\/p>\n","protected":false},"excerpt":{"rendered":"Create a simple card flip animation on-hover with CSS 3D transforms.","protected":false},"author":2,"featured_media":5928,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5927","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5927"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5927\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5928"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}