{"id":5535,"date":"2024-04-14T21:25:22","date_gmt":"2024-04-14T13:25:22","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5535"},"modified":"2024-04-14T22:34:14","modified_gmt":"2024-04-14T14:34:14","slug":"activate-3d-components","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/activate-3d-components\/","title":{"rendered":"Activate 3D components"},"content":{"rendered":"
Modifying solely 2D and 3D changes on components can give them an isometric or flat appearance. To activate genuine 3D perspective, you’ll have to turn on Offspring perspective on a superior element. This changes the superior element’s functionality resembling a “camera” that exhibits various views of the child components and establishes perspective.<\/p>\n

To incorporate Offspring perspective on a superior element:<\/p>\n

    \n
  1. Pick the superior element (for instance, a Segment)<\/li>\n
  2. Unfold the Style panel<\/strong> > Effects<\/strong><\/li>\n
  3. Tap the 3 disclosure dots to the right of 2D & 3D transformations<\/strong><\/li>\n
  4. Set the Offspring perspective’s range<\/strong> (e.g., 1000 pixels)<\/li>\n<\/ol>\n
    \n
    \"In<\/div>\n<\/figure>\n

    To implement 2D and 3D transformations on a child element:<\/p>\n

      \n
    1. Pick the child element (for instance, a Section block)<\/li>\n
    2. Unfold Style panel<\/strong> > Effects<\/strong><\/li>\n
    3. Tap the \u201cplus<\/strong>\u201d symbol to the right of 2D & 3D transformations<\/strong> segment<\/li>\n
    4. Opt for Kind <\/strong>> Rotate<\/strong><\/li>\n
    5. Utilize the sliders to modify the X and Y axes (e.g., fix X to -17 degrees and Y to 23 degrees)<\/li>\n<\/ol>\n
      \n
      \"A<\/div>\n<\/figure>\n
      Remark: <\/strong>To integrate 2D and 3D transformations to numerous child elements at once, append the identical class to each child element. Gain more knowledge about Classes.<\/h6>\n

      Presently, you can revisit the superior element and adapt the Offspring perspective range to give the child elements a flatter or more 3D appearance. Gain more knowledge about utilizing 3D transformations.<\/p>\n

      Incredible! It’s a completely different dimension of impressive!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use Children perspective and 2D & 3D transforms to give your elements a 3D look.","protected":false},"author":2,"featured_media":5335,"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-5535","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\/5535","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=5535"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5535\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5325"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}