Q_3.css

@keyframes turn {
    from { transform: rotate3d(0, 0, 0, 0); }
    to { transform: rotate3d(1, 1, 0, 360deg); }
  }
  
  .container {
    width: 200px;
    height: 200px;
    perspective: 500px;
    margin-inline: 500px;
    padding: 100px;
    border: 2px solid;
    background-color: antiquewhite;
  }
  
  .cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: turn 5s linear infinite;
  }
  
  .face {
    width: 200px;
    height: 200px;
    background: skyblue;
    border: 2px solid black;
    position: absolute;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    transition: transform 700ms;
  }
  
  .front {
    transform: translateZ(100px);
  }
  
  .back {
    transform: translateZ(-100px) rotateY(180deg);
  }
  
  .left {
    transform: translateX(-100px) rotateY(-90deg);
  }
  
  .right {
    transform: translateX(100px) rotateY(90deg);
  }
  
  .top {
    transform: translateY(-100px) rotateX(90deg);
  }
  
  .bottom {
    transform: translateY(100px) rotateX(-90deg);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .cube {
      animation: none;
      transform: rotate3d(5, 5, 0, 180deg);
    }
  }