<body>
  <div class="grid-container">
    <div class="grid-item">
      1
    </div>
    <div class="grid-item">
      2
    </div>
    <div class="grid-item">
      3
    </div>
    <div class="grid-item">
      4
    </div>
    <div class="grid-item">
      5
    </div>
    <div class="grid-item">
      6
    </div>
    <div class="grid-item">
      7
    </div>
    <div class="grid-item">
      8
    </div>
    <div class="grid-item">
      9
    </div>
    <div class="grid-item">
      10
    </div>
    <div class="grid-item">
      11
    </div>
    <div class="grid-item">
      12
    </div>
    <div class="grid-item">
      13
    </div>
    <div class="grid-item">
      14
    </div>
    <div class="grid-item">
      15
    </div>
    <div class="grid-item">
      16
    </div>
  </div>
</body>
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;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  opacity: 0; 
  transition: opacity 0.3s ease-in-out;
}

.grid-item:hover .overlay {
  opacity: 1; 
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.