How to Create 3D Patterns with CSS Transform

In this tutorial, we start recreating MC Escher’s Cube 23150 with CSS. This tutorial explains 3D transformations in CSS, how to make patterns with selectors, how to generate HTML with Pug, and how to use mixins with SCSS. If you are new to web development and want to learn how to develop games and other fun stuff, check out my channel.

👉 You find the game and its source code here:
https://codepen.io/HunorMarton/pen/BazeOpE

  • 0:00 Introduction
  • 0:48 3D cube
  • 3:22 Pattern and generating tiles with Pug
  • 6:30 Another variation with SCSS mixin
  • 8:44 The result

#css #html

How to Create 3D Patterns with CSS Transform