Загрузка данных

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

    .cube {
      width: 200px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;
      /* Статичный угол: видны передняя, правая и верхняя грани */
      transform: rotateX(-25deg) rotateY(-35deg);
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.5);
      display: block;
      text-decoration: none;
    }

    .face img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .face-label {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      background: rgba(0, 83, 118, 0.65);
      color: white;
      font-size: 13px;
      font-weight: bold;
      padding: 5px 0;
      text-shadow: 0 1px 3px #000;
    }

    .face-front { transform: translateZ(100px); }
    .face-right { transform: rotateY(90deg) translateZ(100px); }
    .face-top   { transform: rotateX(90deg) translateZ(100px); }
  </style>
</head>
<body>

  <div class="scene">
    <div class="cube">

      <!-- Передняя грань — Море -->
      <a href="sea.html" class="face face-front">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&q=80" alt="Море">
        <span class="face-label">Море</span>
      </a>

      <!-- Правая грань — Горы -->
      <a href="mountains.html" class="face face-right">
        <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400&q=80" alt="Горы">
        <span class="face-label">Горы</span>
      </a>

      <!-- Верхняя грань — Сооружения -->
      <a href="buildings.html" class="face face-top">
        <img src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=400&q=80" alt="Сооружения">
        <span class="face-label">Сооружения</span>
      </a>

    </div>
  </div>