几何形状的阴影

Question

vanzo16

Asked:2025-03-16 01:43:00 +0800 CST2025-03-16 01:43:00 +0800 CST 2025-03-16 01:43:00 +0800 CST

立方体中的图像变换

772

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

<!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>

3 个回答

Voted

BlackStar1991 · Answer 1 · 2025-03-18T18:47:54+08:00

BlackStar1991

2025-03-18T18:47:54+08:002025-03-18T18:47:54+08:00

这是一项相当耗费人力的任务。你需要为立方体的每个面分配一个属性，overflow:hidden然后在每个面中放置一张图片，相同或不同，但它们必须都是相同的大小。接下来，除主图像之外的所有其他图像都应相对于视野之外的中心进行移动。比如，transform:translate(-100%, 0)或者这个领域的一些东西。接下来，挂上一个事件处理程序，用于跟踪光标当前位于立方体的哪个部分。两种状态：1 - 位于其中，2 - 位于其中。然后，这些图片的变换位置会随着时间而同步改变......这样，这两张图片就好像是相互依存的。

为了简单起见，我建议您只从两架飞机开始。当你在 2 上实现它时，它将在 6 上起作用......尽管事实上如果你的立方体不旋转，它会更少。

2

puffleeck · Answer 2 · 2025-03-19T03:57:02+08:00

嗯...难道不是吗？

附言我听了老鼠的话只是为了不用猜测哪个角度更直观。

var cub = document.querySelector(".cube");

window.addEventListener("mousemove",
  function (e) {
    var leftCord = e.pageX;
    var TopCord = e.pageY;

    document.querySelector(".cube").style.cssText =
      "transform: rotateY(" + (leftCord / 2.5) + "deg) rotateX(" + (TopCord / 2.5) + "deg);";
  },
  false
);

var posX, posY;

function positFingers(e) {
  posX = e.pageX;
  posY = e.pageY;
  document.querySelector(".cube").style.cssText =
    "-webkit-transform:rotateY(" + posX + "deg) rotateX(" + posY + "deg);";
}
window.addEventListener("touchmove", positFingers, false);

body {
  margin: 0 auto;
}

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

.cube {
  height: 100%;
  position: absolute;
  transform: translateZ(100px);
  transform-style: preserve-3d;
  width: 100%;
}

.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);
}

:is(.back, .top, .bottom) .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: 75%;
  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%);

  }

}

<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">
      <div class="img-inner"></div>
      <div class="img-inner"></div>
      <div class="img-inner"></div>
    </figure>
    <figure class="side bottom">
      <div class="img-inner"></div>
      <div class="img-inner"></div>
      <div class="img-inner"></div>
    </figure>
  </div>
</div>

Agzam · Answer 3 · 2025-03-19T14:01:58+08:00

我用图片给每一侧制作了动画，并计算了它们animation-delay，并将其设置transform: translateY(100%);为初始状态

back>.img-inner {
    animation-delay: 1s;
}
.bottom>.img-inner {
    animation-delay: 2s;
}

顶面是这样的0s，背面是这样的1s，底面是这样的2s

动画现在从100%到-400%

<!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 2s 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);
    }

    .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: 100%;
      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 4s linear infinite;
        transform: translateY(100%);
    }

    .back>.img-inner {
      animation-delay: 1s;
    }

    .bottom>.img-inner {
      animation-delay: 2s;
    }


    @keyframes marquee-vertical {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(-400%);
      }
    }
  </style>
</head>

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

</html>

立方体中的图像变换

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

立方体中的图像变换

3 个回答

相关问题