主页 / user-591643

vanzo16's questions

Martin Hope
vanzo16
Asked: 2025-03-16 01:43:00 +0000 UTC
  • 7

大家好。如何沿着立方体的边缘变换图像？以便它们能够顺利地从一个边缘流到另一个边缘？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perspective</title>
  <style>
    body {
      margin: 0 auto;
    }

    .cube-container {
      height: 200px;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -100px;
      perspective: 600px;
      perspective-origin: 50% 50%;
      position: absolute;
      width: 200px;
    }

    .cube {
      height: 100%;
      position: absolute;
      transform: translateZ(100px);
      transform-style: preserve-3d;
      width: 100%;
      animation: spin 5s linear infinite;
    }

    .side {
      background: transparent;
      border: 3px solid grey;
      height: 196px;
      position: absolute;
      width: 196px;
      overflow: hidden;

    }

    .front {
      transform: translateZ(100px);
    }

    .back {
      transform: rotateX(180deg) translateZ(100px);
    }

    .back .img-inner {
      width: 100%;
      height: 100%;
      background-image: url(https://cdn.sportmaster.ru/upload/content/mediahab/prod/0c868511-3fc5-4da6-9092-56235985e840.jpg);
      background-position: top;
      background-size: 33%;
      background-repeat: no-repeat;
    }

    .left {
      transform: rotateY(-90deg) translateZ(100px);
    }

    .right {
      transform: rotateY(90deg) translateZ(100px);
    }

    .top {
      transform: rotateX(90deg) translateZ(100px);
    }

    .bottom {
      transform: rotateX(-90deg) translateZ(100px);
    }

    .img-inner {
      animation: marquee-vertical 5s linear infinite;
    }

    @keyframes marquee-vertical {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-100%);

      }

    }
  </style>
</head>

<body>
  <div class="cube-container">
    <div class="cube">
      <figure class="side front"></figure>
      <figure class="side back">
        <div class="img-inner"></div>
        <div class="img-inner"></div>
        <div class="img-inner"></div>
      </figure>
      <figure class="side left"></figure>
      <figure class="side right"></figure>
      <figure class="side top"></figure>
      <figure class="side bottom"></figure>
    </div>
  </div>
</body>

</html>

css