perspective() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* The parent container centers the item */
.container {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

/* The element being transformed */
.cube {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);

  /* 1. Establish perspective (distance from viewer)
     2. Rotate the element to see the depth 
  */
  transform: perspective(500px) rotateY(45deg);
  
  /* Smooth transition for hovering */
  transition: transform 0.5s ease;
}

/* Change the rotation on hover to see the 3D effect in motion */
.cube:hover {
  transform: perspective(500px) rotateY(-20deg) rotateX(20deg);
  background-color: #2980b9;
}</style></head><body><div class="container">
  <div class="cube">3D Card</div>
</div></body></html>