{"id":6340,"date":"2024-04-14T15:08:36","date_gmt":"2024-04-14T07:08:36","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6340"},"modified":"2024-04-14T15:08:36","modified_gmt":"2024-04-14T07:08:36","slug":"magnify-depth-with-z-scale","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/magnify-depth-with-z-scale\/","title":{"rendered":"Magnify depth with Z-scale"},"content":{"rendered":"\n
\n

Exploring in this module:\u00a0<\/p>\n

    \n
  1. Establish a child perspective<\/li>\n
  2. Adjust the z-position of child elements<\/li>\n
  3. Modify along the z-axis<\/li>\n
  4. Polish transitions for coherence<\/li>\n<\/ol>\n

    Establish a child perspective<\/h2>\n

    In the Style section, define the Children Perspective (e.g., about 1000 pixels).<\/p>\n

    <\/p>\n

    Adjust the z-position of child elements<\/h2>\n
      \n
    1. Select the element under consideration<\/li>\n
    2. In the Style section, expand Transforms by clicking the plus sign and fine-tune the z-position<\/li>\n<\/ol>\n

      <\/p>\n

      Modify along the z-axis<\/h2>\n
        \n
      1. Select the element under consideration<\/li>\n
      2. In the Style section, expand Transforms using the plus sign\u00a0<\/li>\n
      3. Access the Scale option and adjust the z-axis (if too minimal, the element may vanish)<\/li>\n
      4. Click on the menu atop beside States<\/li>\n
      5. Select Hover<\/li>\n
      6. Within Transforms, adjust the scale back to its initial value (e.g., 1)<\/li>\n<\/ol>\n

        Polish transitions for coherence<\/h2>\n
          \n
        1. In the Style section, click the clock icon under Transitions & Transforms<\/li>\n
        2. Opt for Transform from the menu<\/li>\n
        3. Choose a duration exceeding 200 MS\u00a0<\/li>\n<\/ol>\n

          <\/p>\n

          Evaluate your progress in the preview.\u00a0<\/p>\n

          <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create a hover effect by scaling along the z-axis for an explosive, attention-grabbing transition.","protected":false},"author":2,"featured_media":6341,"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-6340","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\/6340","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=6340"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6340\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6341"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}