Simple CSS 3D Rotate Animation

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 3D Rotate Animation</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f0f0;
    }

.scene {
      width: 200px;
      height: 200px;
      perspective: 600px;
    }

.cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate 5s infinite linear;
    }

.face {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.9);
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

.front  { transform: translateZ(100px); }
    .back   { transform: rotateY(180deg) translateZ(100px); }
    .left   { transform: rotateY(-90deg) translateZ(100px); }
    .right  { transform: rotateY(90deg) translateZ(100px); }
    .top    { transform: rotateX(90deg) translateZ(100px); }
    .bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotate {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>
<body>

</body>
</html>

1 Comments

Anonymous 13 November, 2024
2024-11-13T12:52:39+05:30
1. The .scene element is the container for the 3D scene.

2. The .cube element holds the six faces of the cube (.front, .back, .left, .right, .top, .bottom), each positioned using transform.

3. The .scene element defines the 3D perspective.

4. The .cube is set to preserve 3D transformations (transform-style: preserve-3d) and has an animation applied to it.

5. Each .face of the cube is positioned absolutely with different transformations to create a cube effect.

6. The @keyframes rotate animation continuously rotates the cube around the Y-axis.

Simple CSS 3D Rotate Animation

You may like these posts :

1 Comments