{"id":7118,"date":"2024-04-14T17:14:23","date_gmt":"2024-04-14T09:14:23","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7118"},"modified":"2024-04-14T17:14:23","modified_gmt":"2024-04-14T09:14:23","slug":"alters","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/alters\/","title":{"rendered":"Alters"},"content":{"rendered":"\n
\n

Give your elements fresh appeal with alter effects. Shift, enlarge, revolve, and slant your elements to provide them with a 3D look.<\/p>\n

Prior to commencing this handbook, have a look at the introductory guide to 3D.<\/p>\n

Contained in this tutorial:<\/strong><\/p>\n

    \n
  1. Comprehend Alters<\/li>\n
  2. Shift an element<\/li>\n
  3. Enlarge an element<\/li>\n
  4. Revolve an element<\/li>\n
  5. Slant an element\u2019s proportions<\/li>\n
  6. Modify alter configurations<\/li>\n<\/ol>\n

    Overview of Alters<\/h2>\n

    There are 4 kinds of alters:<\/p>\n

      \n
    1. Shift<\/li>\n
    2. Enlarge<\/li>\n
    3. Revolve<\/li>\n
    4. Slant<\/li>\n<\/ol>\n

      You can incorporate an alter or multiple alters to an element in Styling section<\/strong> > Impacts<\/strong> > 2D & 3D alters<\/strong>.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      Shift an element<\/h2>\n

      In this instance, let\u2019s include alters to a Connection block<\/strong>. This will be carried out in the Hover<\/strong> status:<\/p>\n

        \n
      1. Move a Segment<\/strong> from the Include elements panel<\/strong> onto your site<\/li>\n
      2. Assign a class to the Segment<\/strong> (e.g., \u201cKey segment\u201d)<\/li>\n
      3. Drag a Connection block<\/strong> from the Include elements panel<\/strong> into the Segment<\/strong> you just inserted<\/li>\n
      4. Assign a class to the Connection block<\/strong> (e.g., \u201cConnection block\u201d) and customize it according to your preference<\/li>\n
      5. Replicate the Connection block<\/strong> to make a total of 3<\/li>\n
      6. Select the Connection block<\/strong><\/li>\n
      7. Unfold Styling section<\/strong> > Selector zone<\/strong> and opt for Hover<\/strong> from the dropdown<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        Lets apply a Shift<\/strong> alter to the Hover<\/strong> status of the Connection block<\/strong>:<\/p>\n

          \n
        1. Unfold Styling section<\/strong> > Impacts<\/strong> > 2D & 3D transforms<\/strong><\/li>\n
        2. Select the plus symbol to append a new Alteration<\/strong><\/li>\n<\/ol>\n
          \n
          <\/div>\n<\/figure>\n

          The Shift<\/strong> alter is the standard choice, and the default unit for Shift<\/strong> values is pixels (px). You can alter the unit by clicking PX and picking your favored unit from the dropdown.<\/p>\n

          Gain further insights about <\/strong>input values and units<\/strong>.<\/strong><\/p>\n

          Through the Shift<\/strong> alter, you can tweak an element\u2019s location to the left and right along the horizontal (X) axis. You can also tweak the location up and down along the vertical (Y) axis. Adjusting both the X and Y axes shifts the element diagonally.<\/p>\n

          Shifting the element along the Z-axis alters the element\u2019s perceived depth. However, there won\u2019t be an impact unless you establish a Offspring viewpoint<\/strong> on a precursor element initially.<\/p>\n

          In our illustration, the Segment<\/strong> you inserted is the precursor element to the Connection block<\/strong>. Let\u2019s tweak its Offspring viewpoint<\/strong>:<\/p>\n

            \n
          1. Pick the Segment<\/strong><\/li>\n
          2. Open Styling section<\/strong> > Impacts<\/strong> > 2D & 3D alters<\/strong><\/li>\n
          3. Click the 3 dots to unveil Alteration Configurations<\/strong><\/li>\n
          4. Revise Offspring viewpoint<\/strong> > Distance<\/strong> to 1000 px<\/li>\n<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            Now that the Offspring perspective<\/strong> has been configured on the Key segment \u2014 the precursor element of the Connection block<\/strong> \u2014 let\u2019s update the Z-axis value of the Connection block<\/strong>:<\/p>\n

              \n
            1. Select the Connection block<\/strong><\/li>\n
            2. Unfold Styling section<\/strong> > Selector zone<\/strong><\/li>\n
            3. Tap the dropdown arrow and pick Hover<\/strong><\/li>\n
            4. Scroll to Impacts<\/strong> > 2D & 3D alters<\/strong> and hit the Shift<\/strong> alter that you crafted previously<\/li>\n
            5. Adjust the Z value to intensify the depth perspective<\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n

              Hover over any of the Connection blocks<\/strong> to observe the alter effect in motion \u2014 in our situation, the effect is presently too abrupt.<\/p>\n

              To smoothen the effect:<\/p>\n

                \n
              1. Select your Connection block<\/strong> and make certain it\u2019s in the None<\/strong> status<\/li>\n
              2. Unfold Styling section<\/strong> > Impacts<\/strong> > Shifts<\/strong><\/li>\n
              3. Hit the plus symbol to append a shift<\/li>\n
              4. From the dropdown, select Alteration<\/strong><\/li>\n
              5. Set the Duration<\/strong> to 500 ms<\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n

                The transformation of your Link blocks <\/strong>appears more fluid when hovering.<\/p>\n

                Important: <\/strong>When you define a transform type on an element, you can set the values for one or more of its axes. However, switching between transform types (e.g., from Move<\/strong> to Scale<\/strong>) while configuring transform values will result in the loss of your initial settings.<\/p><\/blockquote>\n

                To incorporate multiple transform types without losing any previous configurations, simply add another transform using the addition icon.<\/p>\n

                Modify the size of an element<\/h2>\n

                Let\u2019s introduce a separate Scale<\/strong> transformation to our Link block<\/strong>:\u00a0<\/strong><\/p>\n

                  \n
                1. Opt for the Link block<\/strong><\/li>\n
                2. Access Style panel<\/strong> > Selector field<\/strong><\/li>\n
                3. Expand the dropdown menu and select Hover<\/strong><\/li>\n
                4. Navigate to Effects<\/strong> > 2D & 3D transforms<\/strong> and click the addition icon to include a new transformation<\/li>\n
                5. Tap the Scale<\/strong> button and adjust the values for the X and Y axes<\/li>\n<\/ol>\n
                  \n
                  <\/div>\n<\/figure>\n

                  Scale<\/strong> transformations cause an element to visually expand if the value exceeds 1 or contract if it lies between 0 and 1. By default, the X and Y values are interconnected for proportional scaling. To adjust individual values, you can unlink the X and Y configurations by deselecting the lock icon.<\/p>\n

                  Observe the effect of the Scale<\/strong> transformation by hovering over the Link blocks<\/strong>.<\/p>\n

                  Important: <\/strong>For a compelling 3D outcome, consider scaling along the Z-axis. This technique particularly enhances elements with children showcasing diverse Z values.<\/p><\/blockquote>\n

                  Explore more about <\/strong>3D perspective<\/strong>.<\/strong><\/p>\n

                  Rotate an element<\/h2>\n

                  Prior to applying a Rotate<\/strong> transformation, let\u2019s eliminate the existing Move<\/strong> and Scale<\/strong> transformations:<\/p>\n

                    \n
                  1. Choose your Link block<\/strong> and ensure it\u2019s in the Hover<\/strong> state<\/li>\n
                  2. Access Style panel <\/strong>> Effects<\/strong> > 2D & 3D transforms<\/strong><\/li>\n
                  3. Hover over each transformation and select the bin icon (Delete)<\/li>\n<\/ol>\n

                    Add the Rotate<\/strong> transformation now:<\/p>\n

                      \n
                    1. Opt for the Link block<\/strong><\/li>\n
                    2. Access Style panel<\/strong> > Selector field<\/strong><\/li>\n
                    3. Expand the dropdown menu and select Hover<\/strong><\/li>\n
                    4. Navigate to Effects<\/strong> > 2D & 3D transforms<\/strong> and click the addition icon to add a new transformation<\/li>\n
                    5. Tap the Rotate<\/strong> button and make adjustments to the X, Y, and Z axes<\/li>\n<\/ol>\n
                      \n
                      <\/div>\n<\/figure>\n

                      To rotate an element clockwise or counter-clockwise, you\u2019ll have to rotate along the Z-axis. In the absence of 3D perspective set on the parent element, the X and Y-axis rotations will seem flattened by default.<\/p>\n

                      To give a more 3D appearance to the X and Y-axis rotations, activate 3D perspective \u2014 specifically the Children perspective<\/strong> \u2014 on the parent element. In your scenario, you’ve already established the 3D perspective on the Link block\u2019s<\/strong> parent element, the Section<\/strong>.<\/p>\n

                      Witness the impact of the Rotate<\/strong> transformation by hovering over the Link blocks<\/strong>.<\/p>\n

                      Skew an element<\/h2>\n

                      Prior to implementing a Skew<\/strong> transformation, let\u2019s remove the existing Rotate<\/strong> transformation:<\/p>\n

                        \n
                      1. Select your Link block<\/strong> and ensure it\u2019s in the Hover<\/strong> state<\/li>\n
                      2. Access Style panel <\/strong>> Effects<\/strong> > 2D & 3D transforms<\/strong><\/li>\n
                      3. Hover over the existing transformation and select the bin icon (Delete)<\/li>\n<\/ol>\n

                        Add the Skew<\/strong> transformation now:<\/p>\n

                          \n
                        1. Opt for the Link block<\/strong><\/li>\n
                        2. Access Style panel<\/strong> > Selector field<\/strong><\/li>\n
                        3. Expand the dropdown menu and select Hover<\/strong><\/li>\n
                        4. Scroll to Effects<\/strong> > 2D & 3D transforms<\/strong> and click the addition icon to include a new transformation<\/li>\n
                        5. Tap the Skew<\/strong> button and adjust the values for the X and Y axes<\/li>\n<\/ol>\n
                          \n
                          <\/div>\n<\/figure>\n

                          You can adjust the shearing along the X or Y-axis using the Skew<\/strong> transformation. Enabling 3D perspective on the parent element won’t influence skew transformations.<\/p>\n

                          Modify transform configurations<\/h2>\n

                          Transform configurations provide control over the fundamental options affecting all transformations applied to the element. These encompass the transform Origin<\/strong>, visibility settings for Backface<\/strong>, Self perspective,<\/strong> and Children perspective<\/strong>.<\/p>\n

                          \n
                          <\/div>\n<\/figure>\n

                          You can accessAdjusting the configurations via Appearance panel<\/strong> > Impacts<\/strong> > 2D & 3D transitions<\/strong> is possible. You can just tap the 3 dots to unveil Modification Configurations<\/strong>.\u00a0<\/p>\n

                          \n
                          <\/div>\n<\/figure>\n

                          Starting Point<\/h3>\n

                          The Base<\/strong> for modifications identifies the starting point, or axis, where the alteration takes place. Initially, the Lower<\/strong> is positioned at the midpoint, indicating that all adjustments will occur from the central part of the object.<\/p>\n

                          Let’s fine-tune the transform Midpoint<\/strong> for the Hyperlink box<\/strong>:\u00a0<\/p>\n

                            \n
                          1. Select the Hyperlink box<\/strong><\/li>\n
                          2. Unveil Appearance panel<\/strong> > Identifier section<\/strong><\/li>\n
                          3. Choose the dropdown arrow and select Hover<\/strong><\/li>\n
                          4. Scroll down to Impacts<\/strong> > 2D & 3D transitions<\/strong> and tap the 3 dots to access Modification Configurations<\/strong><\/li>\n
                          5. Modify the Base<\/strong> point\u00a0<\/li>\n
                          6. Test your amendments by hovering over the Hyperlink box<\/strong><\/li>\n<\/ol>\n
                            \n
                            <\/div>\n<\/figure>\n

                            You can define the Base<\/strong> by selecting one of the locations in the Base<\/strong> command. It’s also possible to manually adjust the placement by typing in the values for the horizontal placement (left) and vertical placement (top). Moreover, you can switch the measurement unit between px, % (default), vw, and vh.<\/p>\n

                            If you shift the Base<\/strong> to the lower right, for instance, your adjustments will commence from that position. This affects solely Resize <\/strong>and Spin<\/strong>.\u00a0<\/p>\n

                            3D Perspectives<\/h3>\n

                            When you haven\u2019t specified a perspective, all 3D-compatible alterations (e.g., pivot X, pivot Y, migrate Z, and resize Z) will either exhibit a level, two-dimensional look or no impact at all. Activating a 3D perspective enables you to reposition, rotate, and resize objects in a 3D area.<\/p>\n

                            You can establish a perspective on a superior element and impact all of its offspring, or just on the object itself. Additionally, you can introduce a 3D perspective to your object by defining the gap between the Z-axis and the viewer.<\/p>\n

                            The gap measurement of the perspective determines the intensity of the 3D effect. For a more remarkable effect, specify a small figure (less than 1000px). This method brings the viewer closer to the Z-axis. Opt for increased values to tone down the effect.<\/p>\n

                            Individualized perspective<\/h4>\n

                            You can assign a Personalized perspective<\/strong> on an object if you desire a 3D impact implemented solely to that element and its descendants. However, it’s not as lifelike as assigning a on the main object.\u00a0<\/p>\n

                            To introduce a Individualized perspective<\/strong>:<\/p>\n

                              \n
                            1. Select the object you wish to influence<\/li>\n
                            2. Open Appearance panel<\/strong> > Impacts<\/strong> > 2D & 3D transitions<\/strong> and tap the 3 dots to disclose Modification Configurations<\/strong><\/li>\n
                            3. Set a distance value for Personalized perspective<\/strong><\/li>\n<\/ol>\n
                              \n
                              <\/div>\n<\/figure>\n

                              Offspring perspective<\/h4>\n

                              Establishing an Offspring perspective<\/strong> on an upper element creates a realistic 3D look on all of its dependent components.<\/p>\n

                              To set an Offspring perspective<\/strong> on an upper element:<\/p>\n

                                \n
                              1. Select the main element whose Offspring perspective<\/strong> you wish to adjust<\/li>\n
                              2. Unveil Appearance panel <\/strong>> Impacts<\/strong> > 2D & 3D transitions<\/strong> and tap the 3 dots to access Modification Configurations<\/strong><\/li>\n
                              3. Revamp the Gap <\/strong>and Base <\/strong>for your alterations<\/li>\n<\/ol>\n
                                \n
                                <\/div>\n<\/figure>\n

                                These 3D arrangements will be applied to transform properties configured on the descendants of the superior element.<\/p>\n

                                Opposite Side<\/h3>\n

                                Rear <\/strong>gives you the option to decide the visibility of the reverse side of an object.<\/p>\n

                                By default, when you pivot an element 180\u00b0 along the X or Y-axis, it appears inverted, as if viewed from the back. Any textual content inside the element will seem reversed as if it’s being viewed through a mirror.\u00a0<\/p>\n

                                You can present or conceal the Rear<\/strong> portion of an element in the element\u2019s transform configurations:<\/p>\n

                                  \n
                                1. Choose the element you intend to adjust<\/li>\n
                                2. Unveil Appearance panel<\/strong> > Impacts<\/strong> > 2D & 3D transitions<\/strong> and tap the 3 dots to access Modification Configurations<\/strong><\/li>\n
                                3. Pick between Visible<\/strong> or Hidden<\/strong> for Rear<\/strong><\/li>\n<\/ol>\n
                                  \n
                                  <\/div>\n<\/figure>\n

                                  This feature is helpful when designing rotating cards<\/a> that disclose content on the opposite side.<\/p>\n

                                  Now you’re ready to bring those items into motion!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use 2D\u2008and 3D transforms to manipulate an element’s appearance and position without affecting surrounding elements.","protected":false},"author":2,"featured_media":7119,"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-7118","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\/7118","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=7118"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/7119"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}