Back

Transform your Website: Create 3D Magic with CSS Grid

Esther Christopher Esther Christopher

Mar 8, 2024 · 8 min read

Transform your Website: Create 3D Magic with CSS Grid

3D effects in web design create a user experience that transcends traditional web design. They introduce a dimension and depth that is captivating to the site’s visitors and create an engaging and interactive experience for users. 3D also aids in storytelling through visuals that give the users an illusion of a real experience by bringing the objects or elements of the story to life, and this article will show you how to do this.

CSS Grid is a layout system in CSS used to create two-dimensional grid-based layouts along both the horizontal and vertical axes on web pages. It provides a way to create responsive and more complex design layouts. While CSS grid is originally for creating two-dimensional layouts, it can be combined with CSS transforms to create a 3D layout effect.

A 3D layout is an arrangement of elements in a way that emulates a three-dimensional space, attempting to replicate the physical world. CSS provides styling features like 3D transforms, perspective, and other properties to create 3D layouts. These techniques enable developers to elevate their projects with dynamic interactivity.

Important properties for making grid layouts

Let’s review a quick overview of the CSS grid to understand its properties and concepts.

  • Grid container: An element becomes a grid container by applying the display property with the value of the grid to it, i.e., display: grid.

  • Rows and columns: You determine the number of rows and columns you want, then specify them using the grid-template-rows or grid-template-columns property.

  • Grid item: This refers to the child element of the grid container.

  • Grid gaps: Grid-gap sets the spacing between rows and columns.

  • Fractional unit: fr is used to distribute the available spacing among the grid items proportionally.

Here’s a code snippet demonstrating how CSS Grid works.

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.item {
  background: yellowgreen;
  font-size: 3rem;
  padding: 20px;
  text-align: center;
}

CB92D94A-2832-4C8F-B462-62FEE374108D_1_201_a

display: grid is applied to the container class, making it a grid container with four grid items. The repeat(4, 1fr) is used to set up the grid columns by creating four columns, each taking up an equal fraction of the available space (1fr). The equal spacing can be seen in the image above.

Some other important properties for making layouts.

  • grid-column and grid-row are shorthand properties used to represent the start and end positions of a grid item along the row or column.

  • grid-template-areas: These are named areas where grid items are assigned in the layout.

  • justify-content and align-content: This aligns or justifies the entire grid within its container.

  • grid-auto-columns and grid-auto-rows: This is used to specify the size of columns and rows that were implicitly created.

Code snippet demonstrating some other grid properties for making layouts.

<div class="container">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: yellowgreen;
  color: rgb(15, 3, 3);
  font-size: 3rem;
  padding: 30px;
  text-align: center;
}
.item1 {
  grid-column: 1 / 3;
}
.item2 {
  grid-column: 2 / 4;
}
.item3 {
  grid-column: 1 / 2;
}

FD91AE2E-AE62-4969-9121-68A57FF79C6A_1_201_a

The class container is a grid-container with grid items.
The grid-item selector defines the styling common to each item. The grid-column property on each item specifies the number of columns each item should span across. item1 class specifies that the item should span from column 1 and end at column 3. item2 spans from column 2 and ends at column 4. Similarly, item3 spans from column 1 and ends at column 2. This is all demonstrated in the image.

A demonstration of grid-template-areas.

<div class="container">
  <div class="grid-item item1">Header</div>
  <div class="grid-item item2">Main</div>
  <div class="grid-item item3">Sidebar</div>
  <div class="grid-item item4">Footer</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
.grid-item {
  background-color: yellowgreen;
  font-size: 3rem;
  color: #000000;
  padding: 30px;
  text-align: center;
}
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: main;
}
.item3 {
  grid-area: sidebar;
}
.item4 {
  grid-area: footer;
}

017DE65B-6B2B-4350-AA6E-EEB0AD01B476_1_201_a

Here, the grid layout is established by defining named areas using the grid-template-areas property. Then, each grid item is assigned to a specific named area using the grid-area property. This ensures that each item is placed within its specified named area on the grid. In the image, the header and footer spans across the entire column as defined by the grid-template-areas. The main occupies the first two columns in its grid-template-area while the sidebar occupies the last column.

Overlays in web design

An overlay is a property in CSS used to add visual elements to an existing element. It can be colors, text, or gradients. Overlays enhance visual appeal.

Here’s a code snippet on creating overlays and a subsequent pictorial representation.

<div class="grid-container">
  <div class="grid-item">
    <div class="overlay"></div>
    1
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    2
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    3
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    4
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    5
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    6
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    7
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    8
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    9
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    10
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    11
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    12
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    13
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    14
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    15
  </div>
  <div class="grid-item">
    <div class="overlay"></div>
    16
  </div>
</div>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.grid-item {
  position: relative;
  background-color: #3498db;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  height: 100px;
  width: 100px;
  transition: transform 0.5s ease;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 24, 64, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.grid-item:hover .overlay {
  opacity: 1;
}

The grid-container has 16 grid items placed in a grid layout of 4 columns of equal width and a 20px gap. On hover, an overlay appears with a smooth transition. The overlay class is styled with an absolute top and left properly of 0 and a width and height of 100%, so it is completely on top of the grid item.

The grid-item:hover .overlay changes the overlay’s opacity to 1 (fully visible) on hover.

Note: Adjust the browser size of the code result with the size options provided to see the result completely.

3D layer grid hover effect

This section will cover how to make a 3D layer hover effect using a grid and 3D transformation.

.grid-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  transform: rotate(-30deg) skew(25deg);
}
.grid-item {
  position: absolute;
  right: 13px;
  background-color: #3498db;
  opacity: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  height: 100px;
  width: 100px;
  transition: 0.5s;
}
.grid-container:hover .grid-item:nth-child(4) {
  transform: translate(120px, -120px);
  opacity: 1;
}
.grid-container:hover .grid-item:nth-child(3) {
  transform: translate(90px, -90px);
  opacity: 0.8;
}
.grid-container:hover .grid-item:nth-child(2) {
  transform: translate(60px, -60px);
  opacity: 0.6;
}
.grid-container:hover .grid-item:nth-child(1) {
  transform: translate(30px, -30px);
  opacity: 0.4;
}
.grid-container .grid-item:nth-child(16) {
  opacity: 1;
}
.grid-container:hover .grid-item:nth-child(16) {
  opacity: 0;
}

The transform property in the grid-container is a 3D-like transformation applied using rotate and skew. The rotate property rotates the grid-items by -30deg and skews it by 25deg, creating a skewed grid.

The grid-item class absolutely positions each item, allowing them to stack on top of each other. On hover, different translate and opacity values are applied to each grid-item, bringing about a difference in transparency.

The nth-child selector targets specific grid items, which are given different translate and opacity values, creating the layered hover effect. The 16th grid item is given an initial opacity of 1 and an opacity of 0 on hover. This is what makes it present initially and disappears when hovered on.

Introduction to perspective in CSS

Perspective in CSS defines the depth at which an element is seen. It defines how close or far an object is from the viewer. The perspective property is used with 3D transformation to give the transformed elements some perspective.

Adding 3D appearance to grid items

This section will demonstrate how to add a 3D appearance to grid items.

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 20px;
  transform-style: preserve-3d; 
}

.grid-item {
  position: relative;
  background-color: #3498db;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  height: 100px;
  width: 100px;
  transform: rotateX(10deg) rotateY(-18deg) rotateZ(13deg); 
  transition: transform 0.3s ease-in-out;
}

.grid-item:hover {
  transform: rotateY(180deg) translateZ(50px); 
}

In this effect, 3D transformation made the grid items flip sides on hover.

The perspective property transforms the screen into a 3D space. It specifies a value of 500px, which sets the viewer’s distance to the elements to 500 pixels. In simpler terms, it defines how far or close elements appear in the 3D space. The larger the perspective value, the less pronounced the 3D effect will be, and vice versa. You can try increasing or decreasing the perspective values to see how the view changes.

3D transformation allows you to manipulate elements in a three-dimensional space instead of the default two-dimensional space. It allows for the creation of visual effects on a two-dimensional screen.

The transform-style: preserve-3d; applied to the .grid-container class ensures that its child elements with 3D transformations maintain their 3D positioning relative to the container.

transform: rotateX(10deg) rotateY(-18deg) rotateZ(13deg) applies a 3D rotation to each grid item making them flip.

The overlay will transition its opacity over 0.3 seconds (transition: opacity 0.3s ease-in-out).

When a grid item is hovered on(.grid-item:hover), it triggers two transitions: The overlay becomes visible (opacity: 1). The grid item itself flips by 180 degrees around the Y-axis and moves 50 pixels along the Z-axis (transform: rotateY(180deg) translateZ(50px)).

Creating a 3D rotating cube

This section will go into the tutorial of a basic example of a rotating cube using CSS perspective and CSS transforms.

<div class="container">
  <div class="cube">
    <div class="front side"></div>
    <div class="back side"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="top side"></div>
    <div class="bottom side"></div>
  </div>
</div>
.container {
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
  animation: cubeRotate 10s linear infinite;
}
.cube > div {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}
@keyframes cubeRotate {
  0% {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg);
  }
}
.cube .front-view {
  transform: translateZ(-100px);
}
.cube .back-view {
  transform: translateZ(100px);
}
.cube .left-view {
  transform: translateZ(-100px) rotateY(-90deg);
}
.cube .right-view {
  transform: translateZ(-100px) rotateY(90deg);
}
.cube .top-view {
  transform: rotateX(90deg) translateY(100px);
}
.cube .bottom-view {
  transform: rotateX(-90deg) translateY(100px);
}
.side {
  position: absolute;
  width: 500px;
  height: 500px;
}
.front.side {
  background-color: pink;
  transform: translateZ(100px);
}
.back.side {
  background-color: blue;
  transform: translateZ(-100px);
}
.left.side {
  background-color: yellow;
  transform: rotateY(90deg) translateZ(100px);
}
.right.side {
  background-color: aqua;
  transform: rotateY(-90deg) translateZ(100px);
}
.top.side {
  background-color: green;
  transform: translateY(-100px) rotateX(-90deg);
}
.bottom.side {
  transform: translateY(-100px) rotateX(90deg);
}

This code creates a cube that rotates, showing all its six faces at intervals. The .container class sets the perspective property to create a 3D space with a value of 800px.

The .cube class sets the transform-style to preserve-3d to maintain 3D transformations. It also sets a translation along the z-axis to position the cube in 3D space. The transition property adds a smooth transformation to the cube and keeps it rotating.

The @keyframes at-rule in CSS defines animations on elements over a duration. Here, it defines the keyframe animation cubeRotate that specifies different rotation angles at different points of the cube’s rotation.

The .front.side and the other sides of the cube apply the transform property to position each side to different angles in 3D space.

How 3D improves user experience

  • Improved product displays: E-commerce websites use 3D elements to display products from different angles, which provides users with a more interactive view.

  • Interactive Infographics: Infographics can also employ the use of 3D elements to present data in a more visually compelling manner.

  • Engaging Narrative: Websites like news or storytelling planets can use 3D effects to create a more immersive and engaging narrative.

  • Architectural Visualization: Websites involved in architecture or real estate can use 3D to showcase buildings and interiors. This gives the users a chance to explore spaces virtually.

  • Portfolio Showcase: Developers and designers can showcase their work in a 3D portfolio, allowing users to explore projects in a dynamic and interesting way.

Quick tips for common 3D challenges

  • When using 3D effects, ensure that it does not compromise usability; prioritize clarity and ease of navigation.

  • Test your design across different devices and screen sizes to ensure optimal usability.

  • Ensure that 3D elements are accessible to users with disabilities. Provide alternative content or descriptions for 3D visuals.

  • Design with responsiveness in mind. 3D elements should be made to adapt to different screen sizes and device capabilities.

  • Ensure that the 3D effects used do not affect performance. Use lightweight 3D models to ensure fast loading times.

  • Align the 3D elements to fit with the overall style. Also, opt for subtle animations to avoid overwhelming users.

Conclusion

In this article, we went over the significance of 3D effects in CSS. It covers fundamental CSS grid concepts alongside the key properties used in creating layouts. Additionally, we also went through overlays and layering techniques for a 3D look demonstrated by code snippets. Further down, we explored perspective transformation followed by a tutorial on a rotating cube box.

3D effects, when used judiciously, can enhance user experiences by adding depth and immersion to web design.

Techniques such as the ones covered in this article: Overlays, perspective transformations, and depth cues can be used in creating visually engaging interfaces. Keep in mind to balance 3D effects with usability considerations to ensure an intuitive user experience.

Here are resources on 3D effects in CSS to further explore and see its vast capabilities.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog

Learn how to use this powerful date and time library

Sep 25, 2024, 8 min read

10 Practical Examples of using Day.js

Learn the top 10 tools you should be using for web development

May 5, 2023, 9 min read

10 must-have tools for Front End Developers