Heim > Web-Frontend > js-Tutorial > Würfelillusion mit HTML-CSS und Javascript

Würfelillusion mit HTML-CSS und Javascript

Mary-Kate Olsen
Freigeben: 2024-10-23 00:02:30
Original
597 Leute haben es durchsucht

cube illusion using html css and javascript

Folgen Sie uns auf: https://www.instagram.com/webstreet_code/

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Interactive Rubik's Cube</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #121212;
    }
    .scene {
      width: 300px;
      height: 300px;
      perspective: 1000px;
    }
    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 1s ease;
    }
    .cube-face {
      position: absolute;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      width: 300px;
      height: 300px;
      background: #fff;
      border: 2px solid #333;
      transform: translateZ(150px);
    }
    .cube-face div {
      border: 2px solid #d3caca;
    }
    /* Colors for each face */
    .front div { background: red; }
    .back div { background: orange; }
    .left div { background: blue; }
    .right div { background: green; }
    .top div { background: yellow; }
    .bottom div { background: white; }

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

    /* Cube rotation on hover */
    .scene:hover .cube {
      transform: rotateX(360deg) rotateY(360deg);
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="cube">
      <!-- 6 faces of the Rubik's Cube -->
      <div class="cube-face front">
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
      </div>
      <div class="cube-face back">
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
      </div>
      <div class="cube-face left">
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
      </div>
      <div class="cube-face right">
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
      </div>
      <div class="cube-face top">
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
      </div>
      <div class="cube-face bottom">
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
        <div></div><div></div><div></div>
      </div>
    </div>
  </div>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWürfelillusion mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage