rotate3d() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* The scene creates the 3D space */
.scene {
  width: 200px;
  height: 200px;
  margin: 80px auto;
  perspective: 600px;
}

/* The element we are rotating */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  background: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  border: 2px solid #2980b9;
  
  /* Applying the 3D rotation */
  /* This rotates 45 degrees around a vector pointing diagonally (1,1,1) */
  transform: rotate3d(1, 1, 1, 45deg);
  
  transition: transform 0.5s ease;
}

/* Hover effect to show movement */
.cube:hover {
  transform: rotate3d(1, 1, 1, 180deg);
}</style></head><body><div class="scene">
  <div class="cube">
    <div class="face">ROTATE ME</div>
  </div>
</div></body></html>