{"id":6534,"date":"2024-04-14T15:35:24","date_gmt":"2024-04-14T07:35:24","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6534"},"modified":"2024-04-14T15:35:24","modified_gmt":"2024-04-14T07:35:24","slug":"introduction-to-three-dimensional","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/introduction-to-three-dimensional\/","title":{"rendered":"Introduction to Three-Dimensional"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>This article will discuss some essential concepts related to 3D on the internet. Explore the guide on 2D &amp; 3D transformations to understand how to implement these ideas in your Webflow project.<\/p>\n<p><strong>Topics covered in this tutorial:<\/strong><\/p>\n<ol start=\"\">\n<li>Grasping basic 2D principles<\/li>\n<li>Horizontal and vertical movement<\/li>\n<li>Introduction to the third axis &#8211; Z<\/li>\n<li>Overview of parallax<\/li>\n<li>Placement of 2D objects in a 3D setting<\/li>\n<\/ol>\n<h2>Understanding Basic 2D Concepts<\/h2>\n<p>Before delving into three dimensions, it&#8217;s important to comprehend the workings of the initial two dimensions. Specifically, this entails movements horizontally along the X-axis and vertically along the Y-axis.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210064871\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210064871\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>The majority of web content comprises 2D components. This includes elements such as images, headings, paragraphs, and buttons found on websites. The dimensions of these elements, including width, height, and distances between them and others, all occur in two dimensions, lacking actual <em>depth.<\/em><\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210067574\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210067574\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Movement Along Axes<\/h2>\n<p>When elements move horizontally, their X-position adjusts. Likewise, vertical movement involves adjustment of the Y-position. Diagonal movement is achieved through a combination of X and Y adjustments.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210067608\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210067608\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Thus, positioning in two dimensions involves the X-axis and the Y-axis.<\/p>\n<h2>Introduction to the Z-Axis<\/h2>\n<p>Now, let\u2019s focus on the third dimension: Z-axis. When working with three dimensions, it&#8217;s not just about moving left, right, up, and down; it also involves depth.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"undefined:undefined\" data-page-url=\"https:\/\/vimeo.com\/210067671\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210067671\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Given that the web comprises many 2D elements, let&#8217;s take them as an example. Not all 3D elements need to be protrusions or complete 3D objects. In fact, individual 2D elements can be manipulated within 3D space along the Z-axis. They can be moved, rotated &#8211; essentially, anything is possible.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210067756\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210067756\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Overview of Parallax<\/h2>\n<p>One fascinating aspect of 3D motion is the concept of parallax. In the example below, we have cards on a table to demonstrate parallax. None of the cards are physically moving; instead, the camera or field of view is shifted solely along the X-axis.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210067773\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210067773\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Observe how cards closer to us seem to move faster, while those in the distance appear to move more slowly. This variation in speed between near and far objects is known as parallax.<\/p>\n<h2>2D Elements in Three-Dimensional Space<\/h2>\n<p>The fascinating part is that these cards lack depth entirely. When viewed from the side, they vanish. The <em>crucial<\/em> point is that 3D motion doesn&#8217;t always require 3D objects.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210067981\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210067981\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>By incorporating parallax motion, we can add depth to our projects. Moving various elements at slightly different speeds can effectively create a three-dimensional appearance.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/210068091\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/210068091\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"In this article we\u2019ll cover some fundamental 3D concepts for the web.","protected":false},"author":2,"featured_media":6535,"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":[301],"tags":[],"class_list":{"0":"post-6534","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6534","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=6534"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6535"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}