Post
Ask Question

3D Art Of Code

Introduction

 
These days technology is growing and improving simultaneously without waiting for us. UI is being improved day by day. So, normal HTML designing is not enough for a frontend developer, he or she needs more to make a UI more interactive; i.e., switch to 3D designing. So in that way "perspective" view is the property that can help us and others.
 
What is the Perspective?
 
It's a way through which we can make or draw 3d objects into a 2d surface by adjusting their color pattern, shadow, depth and shapes with respect to other objects. Now, these days some websites have started using Perspective and it's mobile-friendly too. Perspective is used in drawing, photography, video making, and game design. Perspective originally meant to look through or to look at an object. The meaning of Perspective in art involves the creation of depth. So, we convey a sense of reality with space and depth on something which has none.
 
So, in reality, Perspective already exists where no kind of surface is involved.
 
 
What is ViewPoint?
 
Viewpoint is the position we are seeing things from; with that in mind, perspective refers to viewpoint and position.
 
The faraway objects are small and nearby objects are large and overlap the far away objects. So, in that way, the meaning of Perspective is to set the viewpoint that best communicates a subject to the audience.
 
 
So what is the use of Perspective in design?
 
 
Using Perspective, we create space and a sense of depth in our UI development. Keeping that in mind we create a better UI. Even the things that don't really look like real to some degree. So, regardless if you are a UX-UI developer or not you need to understand how the audience sees it and this is something all professionals in visual arts deal with.
 
 
So, how to start?
 
There are two containers for beginning: 
  • Parent
  • Child
Code: Index.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Page Title</title>  
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.         <link rel="stylesheet" href="./main.css">  
  7.     </head>  
  8.     <body>  
  9.         <h1>Prespective Styling <strong>3D</strong></h1>  
  10.         <hr>  
  11.         <div class="parent flex-pc">  
  12.             <div class="child flex-pc rotate">  
  13.                 <div class="text front">1</div>  
  14.             </div>  
  15.         </div>  
  16.     </body>  
  17. </html>  
Code: main.css
  1. .flex-pc{  
  2.     display: flex;  
  3.     justify-content: center;  
  4.     align-items: center;  
  5. }  
  6.   
  7. .parent{  
  8.     position: relative;  
  9.     height: calc( 100vh - 94px );  
  10.     transition: 0.3s all ease-in-out;  
  11.      /* for 3d styling these two lines must insert  */  
  12.     transform: perspective(593px); /*1*/  
  13.     transform-style: preserve-3d; /*2*/  
  14.     perspective-origin: top;  
  15. }  
  16.   
  17. .child{  
  18.     background-color: #00808080;  
  19.     width: 400px;  
  20.     height: 400px;  
  21.     display: flex;  
  22.     justify-content: center;  
  23.     align-items: center;  
  24.     position: absolute;  
  25.     font-size: 84px;  
  26.     color: white;  
  27.     box-shadow: inset 0px 0px 143px 0px black;  
  28. }  
  29.   
  30. .rotate{  
  31.     transform: rotateY(40deg);  
  32. }  
Parent has CSS properties
  1. "transform-style: preserve-3d",  
  2. "transform: perspective(n px);  
  3. where 0 < n < infinity  
The greater the value of n , the greater the distance from object
 
Output
 
 
The more you change the values of rotate and perspective, the more effect you see. 
 
Here is code for a simple block animation with Simple Perspective properties,
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.         <title>Page Title</title>  
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.         <style>  
  9.             html, body{  
  10.                 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
  11.                 box-sizing: border-box;  
  12.                 margin: 0;  
  13.                 padding: 0;  
  14.             }  
  15.   
  16.             .flex-pc{  
  17.                 display: flex;  
  18.                 justify-content: center;  
  19.                 align-items: center;  
  20.             }  
  21.   
  22.             .grand-parent{  
  23.                 position: absolute;  
  24.                 left: 50%;  
  25.                 top: 50%;  
  26.                 transform: translate(-50%, -50%);  
  27.             }  
  28.   
  29.             .parent{  
  30.                 position: relative;  
  31.                 height: calc( 100vh - 94px );  
  32.                 transform: rotateX(0deg) rotateY(0deg);  
  33.                 transform-style: preserve-3d;  
  34.                 transition: 0.3s all ease-in-out;  
  35.             }  
  36.   
  37.             .child{  
  38.                 background-color: #00808080;  
  39.                 width: 400px;  
  40.                 height: 400px;  
  41.                 display: flex;  
  42.                 justify-content: center;  
  43.                 align-items: center;  
  44.                 position: absolute;  
  45.                 font-size: 84px;  
  46.                 color: white;  
  47.                 box-shadow: inset 0px 0px 143px 0px black;  
  48.             }  
  49.   
  50.             .child.front{  
  51.                 transform: translateZ(200px) ;  
  52.             }  
  53.   
  54.             .child.back{  
  55.                 transform: rotateX(-180deg) translateZ(200px) ;  
  56.             }  
  57.   
  58.             .child.left{  
  59.                 transform: rotateY(90deg) translateZ(200px) ;  
  60.             }  
  61.   
  62.             .child.right{  
  63.                 transform: rotateY(-90deg) translateZ(200px) ;  
  64.             }  
  65.   
  66.             .child.up{  
  67.                 transform: rotateX(90deg) translateZ(200px) ;  
  68.             }  
  69.   
  70.             .child.down{  
  71.                 transform: rotateX(-90deg) translateZ(200px) ;  
  72.             }  
  73.         </style>  
  74.     </head>  
  75.     <body>  
  76.         <h1>Prespective Styling <strong>3D</strong></h1>  
  77.         <hr>  
  78.         <div class="grand-parent">  
  79.             <div class="parent flex-pc">  
  80.                 <div class="child down">6</div>  
  81.                 <div class="child up">5</div>  
  82.                 <div class="child right">4</div>  
  83.                 <div class="child left">3</div>  
  84.                 <div class="child back">2</div>  
  85.                 <div class="child front">1</div>  
  86.             </div>  
  87.         </div>  
  88.         <script>  
  89.             cube = document.querySelector(".grand-parent .parent");  
  90.             let valX = 0;  
  91.             let valY = 0;  
  92.   
  93.             setInterval(()=>{  
  94.                 cube.style.transform=`rotateX(${valX}deg) rotateY(${valY}deg)`;  
  95.                 valX+=5;  
  96.                 valY+=5;  
  97.             }, 50);  
  98.         </script>  
  99.     </body>  
  100. </html>  
Output
 
 
 
The more you learn, the more you become an expert. It depends on the developer what the user's point of view for the UI is. 


Similar Articles