1. Tutorials
  2. Step-by-Step Guide to Creating a 3D Layer Effect with HTML and CSS

Step-by-Step Guide to Creating a 3D Layer Effect with HTML and CSS

Submitted by oretnom23 on Saturday, January 11, 2025 - 17:06.

In this tutorial, we will build a simple web application featuring a 3D Layer Effect using HTML and CSS. This guide aims to provide you with creative ideas and practical techniques for designing interactive elements on a web application. These concepts can serve as inspiration and be valuable for enhancing the design of your future projects.

In the simple web application we’re about to create, we will design interactive card elements. The 3D Layer Effect will be activated when users hover over these cards, adding a visually appealing and dynamic touch to the user experience.

Let's proceed to the coding part.

Step 1: Creating the Interface

First, let’s create the HTML file for the application. This file will include the foundational HTML structure and elements essential to the app, such as the page background and the card components. Below is the HTML code snippet that you can use as a reference.

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>3d Layer Effect using HTML and CSS</title>
  8.     <!-- Font Awesome -->
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
  10.        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
  11.        crossorigin="anonymous" referrerpolicy="no-referrer" />
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"
  13.        integrity="sha512-b+nQTCdtTBIRIbraqNEwsjB6UvL3UEMkXnhzd8awtCYh0Kcsjl9uEgwVFVbhoj3uu1DO1ZMacNvLoyJJiNfcvg=="
  14.        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  15.     <link rel="stylesheet" href="style.css">
  16. </head>
  17.  
  19.     <div id="main-wrapper">
  20.         <div id="app-title">3D Layer Effect using HTML and CSS</div>
  21.         <div id="LayerEffect">
  22.             <div class="LayerEffect-item">
  23.                 <div>
  24.                     <i class="fa-regular fa-image"></i>
  25.                 </div>
  26.             </div>
  27.             <div class="LayerEffect-item">
  28.                 <div>
  29.                     <i class="fa-solid fa-music"></i>
  30.                 </div>
  31.             </div>
  32.             <div class="LayerEffect-item">
  33.                 <div>
  34.                     <i class="fa-brands fa-facebook-f"></i>
  35.                 </div>
  36.             </div>
  37.             <div class="LayerEffect-item">
  38.                 <div>
  39.                     <i class="fa-brands fa-x-twitter"></i>
  40.                 </div>
  41.             </div>
  42.             <div class="LayerEffect-item">
  43.                 <div>
  44.                     <i class="fa-brands fa-instagram"></i>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </div>
  49.     <script src="script.js"></script>
  50. </body>
  51.  
  52. </html>

Step 2: Createing th JS File

Next, let’s create a new Cascading Stylesheet (CSS) file. This file contains all the style scripts required for designing the application’s interface. It includes styles for the page structure, background, title elements, card components, and the 3D Layer Effect that activates on card hover. Check out the CSS code snippet below for detailed insights into the design process.

style.css

  1. @import url('https://fonts.googleapis.com/css2?family=DynaPuff:[email protected]&display=swap');
  2.  
  3. * {
  4.     font-family: "DynaPuff", serif;
  5.     font-optical-sizing: auto;
  6.     font-weight: 400;
  7.     font-style: normal;
  8.     font-variation-settings:
  9.         "wdth" 100;
  10. }
  11.  
  12. html, body{
  13.     margin: unset;
  14.     padding: unset;
  15.     height: 100%;
  16.     max-height: 100%;
  17.     width: 100%;
  18.     max-width: 100%;
  19.     overflow: auto;
  20. }
  21.  
  22. body {
  23.     color: #fff;
  24.     background-color: #141414;
  25.     background-image: url(./dark-bg.jpg);
  26.     background-repeat: no-repeat;
  27.     background-size: cover;
  28.     background-position: center center;
  29.     display: inline-grid;
  30.     justify-content: center;
  31.     align-items: center;
  32.     height: 100%;
  33.     max-height: 100%;
  34.     width: 100%;
  35.     max-width: 100%;
  36. }
  37.  
  38. #main-wrapper {
  39.     width: 100%;
  40.     max-width: 600px;
  41.     padding: 20px 5px;
  42. }
  43.  
  44. #app-title{
  45.     font-size: 25px;
  46.     font-weight: 700;
  47.     letter-spacing: 1.5px;
  48.     text-align: center;
  49.     margin-bottom: 30px;
  50. }
  51.  
  52. div#LayerEffect {
  53.     display: flex;
  54.     flex-flow: row wrap;
  55.     gap: 1rem;
  56.     justify-content: space-between;
  57. }
  58.  
  59. div#LayerEffect .LayerEffect-item{
  60.     margin-bottom: 15px;
  61.     position: relative;
  62.     transition: all .3s ease-in-out;
  63.     width: 65px;
  64.     height: 65px;
  65. }
  66.  
  67. div#LayerEffect .LayerEffect-item > div {
  68.     position: absolute;
  69.     display: flex;
  70.     align-items: center;
  71.     justify-content: center;
  72.     width: 65px;
  73.     height: 65px;
  74.     border: 1px solid #fff;
  75.     border-radius: 5px;
  76.     background-color: #141414;
  77.     top:0;
  78.     left:0;
  79.     transition: all .3s ease-in-out;
  80.     cursor: pointer;
  81.     font-size: 25px;
  82. }
  83.  
  84. div#LayerEffect .LayerEffect-item:hover {
  85.     transform: rotate(-34deg) skew(11deg, -8deg);
  86. }
  87.  
  88. div#LayerEffect .LayerEffect-item:hover > div:nth-child(1) {
  89.     top: calc(3px * 4);
  90.     left: calc(-3px * 4);
  91.     opacity: .2;
  92.     box-shadow: -5px 6px 10px #fcfcfcd6;
  93. }
  94.  
  95. div#LayerEffect .LayerEffect-item:hover > div:nth-child(2) {
  96.     top: calc(3px * 3);
  97.     left: calc(-3px * 3);
  98.     opacity: .3;
  99. }
  100.  
  101. div#LayerEffect .LayerEffect-item:hover > div:nth-child(3) {
  102.     top: calc(3px * 2);
  103.     left: calc(-3px * 2);
  104.     opacity: .4;
  105. }
  106.  
  107. div#LayerEffect .LayerEffect-item:hover > div:nth-child(4) {
  108.     top: calc(3px * 1);
  109.     left: calc(-3px * 1);
  110.     opacity: .5;
  111. }
  112.  
  113. div#LayerEffect .LayerEffect-item > div:nth-child(5) {
  114.     box-shadow: 3px 4px 7px #fcfcfc45;
  115. }
  116.  
  117. div#LayerEffect .LayerEffect-item:hover > div:nth-child(5) {
  118.     box-shadow: unset;
  119. }

Snapshots

Here are the following screenshots of the result of the source code that I provided above.

When page is loaded

3D Layer Effect with HTML and CSS

When card element is hovered

3D Layer Effect with HTML and CSS

I have also provided a complete source code zip file for the scripts created in this tutorial. You can download it by clicking the download button located below this article. Feel free to download and customize it to suit your needs.

That’s it! I hope this tutorial on Creating a 3D Layer Effect using HTML and CSS helps you achieve your goals and provides valuable insights for your current or future projects.

Don’t forget to explore this website for more Tutorials, Free Source Codes, and Articles that cover various programming languages and techniques to enhance your development skills.

Happy Coding =)

Tags
HTML
css
3d effects
CSS 3D Effects

Add new comment

About text formats
  • 99 views