html - 当我使用像 rotateZ() 这样的 CSS 变换时，为什么我的立方体是 'jump'？-6ren

html - 当我使用像 rotateZ() 这样的 CSS 变换时，为什么我的立方体是 'jump'？

转载作者：可可西里更新时间：2023-11-01 13:20:24

我用立方体制作了一个简单的动画，立方体围绕 Pane 的边缘移动，但在每个 Angular 的旋转方式上遇到了问题。对于前两个 Angular ，它很好并且旋转平稳，但对于其他 Angular ，立方体在它移回原位并继续移动之前似乎“跳跃”了。现在我一直在我的转换中使用 rotateZ()。

我试过使用 transform-origin 之类的东西，但我自己找不到解决方案。我不确定还能做什么，因为我不知道原产地是否有问题，或者是否是尺码问题。我对动画制作还是个新手，所以请原谅任何愚蠢的错误。

请在下面找到代码(目前只有 HTML 和 CSS)。

.perspective {
  background: gray;
  background-size: 50px 50px;
  height: 500px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 500px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  -webkit-transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
  transform-origin: 0% 0%;
  transform-style: preserve-3d;
  animation: test 20s forwards;
}

.cube__face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: blue;
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(25px);
  background: red;
}

.cube__face--right {
  transform: rotateY( 90deg) translateZ(25px);
  background: green;
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(25px);
  background: yellow;
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(25px);
  background: pink;
}

.cube__face--top {
  transform: rotateX( 90deg) translateZ(25px);
  background: purple;
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(25px);
  background: orange;
}

@keyframes test {
  0% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
  }
  2% {
    transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(0px) translateX(0px);
  }
  4% {
    transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(75px) translateX(-50px);
  }
  6% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(150px) translateX(0px);
  }
  8% {
    transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(150px) translateX(0px);
  }
  10% {
    transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(225px) translateX(-50px);
  }
  12% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(300px) translateX(0px);
  }
  14% {
    transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(300px) translateX(0px);
  }
  16% {
    transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(375px) translateX(-50px);
  }
  18% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
  }
  20% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
  }
  22% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(0px);
  }
  24% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(75px);
  }
  26% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(150px);
  }
  28% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(150px);
  }
  30% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(225px);
  }
  32% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(300px);
  }
  34% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(300px);
  }
  36% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(375px);
  }
  38% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
  }
  40% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
  }
  /* X */
  42% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-500px);
  }
  44% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-425px);
  }
  46% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-350px);
  }
  48% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-350px);
  }
  50% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-275px);
  }
  52% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-200px);
  }
  54% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-200px);
  }
  56% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-125px);
  }
  58% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
  }
  60% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
  }
  62% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-500px) translateX(-0px);
  }
  64% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-500px) translateX(-0px);
  }
  66% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-425px) translateX(-0px);
  }
  68% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-350px) translateX(-0px);
  }
  70% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-350px) translateX(-0px);
  }
  72% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-275px) translateX(-0px);
  }
  74% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-200px) translateX(-0px);
  }
  76% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-200px) translateX(-0px);
  }
  78% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-125px) translateX(-0px);
  }
  80% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-50px) translateX(-0px);
  }
  82% {
    transform: rotateZ(-360deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(0px) translateX(-0px);
  }
}

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

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cube Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="perspective">
      <div class="cube">
        <div class="cube__face cube__face--front"></div>
        <div class="cube__face cube__face--back"></div>
        <div class="cube__face cube__face--right"></div>
        <div class="cube__face cube__face--left"></div>
        <div class="cube__face cube__face--top"></div>
        <div class="cube__face cube__face--bottom"></div>
      </div>
    </div>
  </body>

</html>

最佳答案

我认为转换原点导致了问题，因为您试图同时平移和旋转。在你的立方体周围添加一个额外的包装。然后，将您的平移应用到外部 div，并将您的旋转应用到您的内部 div。

为了便于说明，我稍微简化了您的示例，但您会明白的:

.perspective {
  background: gray;
  background-size: 50px 50px;
  height: 500px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 500px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.wrapper {
  width: 50px;
  height: 50px;
  position: relative;
  transform: translate3d(0, 0, 25px);
  transform-origin: 0 0 0;
  transform-style: preserve-3d;
  animation: translation 10s forwards;
}

.cube {
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate3d(0, 0, 0);
  transform-origin: 25px 25px 0;
  transform-style: preserve-3d;
  animation: rotation 10s forwards;
}

.cube__face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: blue;
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(25px);
  background: red;
}

.cube__face--right {
  transform: rotateY( 90deg) translateZ(25px);
  background: green;
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(25px);
  background: yellow;
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(25px);
  background: pink;
}

.cube__face--top {
  transform: rotateX( 90deg) translateZ(25px);
  background: purple;
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(25px);
  background: orange;
}

@keyframes translation {
  0% {
    transform: translate3d(0, 0, 25px);
  }
  25% {
    transform: translate3d(0, 450px, 25px);
  }
  50% {
    transform: translate3d(450px, 450px, 25px);
  }
  75% {
    transform: translate3d(450px, 0, 25px);
  }
  100% {
    transform: translate3d(0, 0, 25px);
  }
}

@keyframes rotation {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(270deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

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

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cube Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="perspective">
      <div class="wrapper">
        <div class="cube">
          <div class="cube__face cube__face--front"></div>
          <div class="cube__face cube__face--back"></div>
          <div class="cube__face cube__face--right"></div>
          <div class="cube__face cube__face--left"></div>
          <div class="cube__face cube__face--top"></div>
          <div class="cube__face cube__face--bottom"></div>
        </div>
      </div>
    </div>
  </body>

</html>

关于html - 当我使用像 rotateZ() 这样的 CSS 变换时，为什么我的立方体是 'jump'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50748092/

文章推荐： php - 我可以在方法中包含一个类吗？

文章推荐： PHP命名空间simplexml问题

文章推荐： php - 流式传输多条推文 - 来自多个用户？ - 推特 API

文章推荐： html - 带有 CSS 背景图片的链接在悬停时跳转

具有多个数据库的 SSAS 立方体
我有 3 个具有相同结构但数据不同的数据库，因为它们来自不同的客户端。现在，我有一个现有的 SSAS 项目。其数据源 View 、多维数据集和维度只能使用或访问一个数据库。我想要的是能够使用具有相
CSS 立方体，无法与网格对齐
所以我的目标是将这些立方体放在一个网格上，并让它们排成一行，可以拖动和捕捉。我根据 this example 使立方体运行良好，但我没有完全理解某些机制，因此遇到了一些问题。立方体开始时比旋转后大。
C# 立方体/多维数据集
我正在解决一个问题，我需要使用 C# 处理内存中的多维数据。我的要求类似于 OLAP 多维数据集，但没有那么复杂。例如，我不需要计算或聚合或类似的东西。我基本上想使用多维键来引用数据。例如: var
agda - 立方体 agda 中针对特定计算行为的路径与等价关系
我在 Cubical agda 工作，并试图为以后的证明建立一些通用的实用程序。其中之一是，对于任何类型 A，它与 Σ A (\_ -> Top) 类型“相同”，其中 Top是具有一个元素的类型。问题
wpf - 创建线框 3D 立方体
我有这个在 WPF Viewport3D 中绘制立方体的代码:
javascript - 如何使用键盘输入移动三个 JS 立方体？
以下代码是我目前写的使用三个js尝试移动或翻译使用 WASD 键上下左右旋转立方体对象，并使用空格键重置到原始位置(屏幕中间)。我对三个 js 很陌生，我不知道如何让运动发挥作用。任何帮助将不胜感激
opengl - 在opengl中绘制体素(立方体)的最有效方法是什么？
我想通过使用 opengl 来绘制体素，但它似乎不受支持。我制作了一个立方体绘制函数，它有 24 个顶点(每个面 4 个顶点)，但是当你绘制 2500 个立方体时它会降低帧速率。我希望有更好的方法。理
aframe - 如何在框架中创建线框 3D 立方体？
我正在努力为盒子基元创建线框。尝试了颜色、不透明度和透明属性，但似乎都不起作用。这是代码 - 需要渲染这样的东西 - 最佳答案您需要查看THREE.Material docs对于这个，有一点需要注
c++ - 纹理化一个 opengl 立方体
我有一个 opengl 立方体，我想对所有 6 个面进行纹理处理。我需要多个纹理吗？这是当前立方体的屏幕截图: 基本上我不知道如何将纹理包裹在整个立方体周围...... 这是我的 cube.h 头
java - 循环遍历 3x3 立方体
我正在为《我的世界》编写一个模组，并遇到了一个令人困惑的数学问题。我想找到中心 block 周围所有 block 的 ID。为此，我想循环遍历 3x3 的方 block 并返回哪些是我想要的方 blo
javascript - 在拖动和滚动时旋转 javascript 立方体
这是我的问题:我一直在尝试让这个 CSS 立方体打开滚动。我做到了!这是它的工作原理:https://codepen.io/vaninoo/pen/BmyYQd 我很高兴。但是和 friend 测试过
css 3d 立方体 - 悬停和渲染错误
我正在尝试创建 3 个具有相同视角的 3d 立方体，这些立方体将在悬停时旋转 90 度。它几乎适用于 chrome，但如果你仔细观察左侧立方体的底部边框，你会看到 1 条蓝色像素线。当您将鼠标悬停在右
html - 无法旋转 3d 立方体
我正在编写一个立方体，但无法使其正确旋转，有人可以帮我吗？我已经尝试了一切。我的代码链接如下: Codepen Link @keyframes spin { from { transform: r
css - 旋转 CSS 立方体
我想创建一个 CSS 立方体，它有 4 个面(正面、背面、顶部、底部)，并且它仅在 X 轴上不断向上(或向下)旋转。但出于某种原因，我无法对齐所有 4 个边，所以它看起来像一个立方体。这是我的标记:
c++ - 时髦的 OpenGL 立方体
啊哈!看来我的问题是我给 gluPerspective 的 zNear 值必须大于 0，而且我必须启用深度缓冲区才能使其工作。我更新了下面的代码以使其正常工作。我尝试过很多次这样做，并且一直认为我以
javascript - 可拖动到网格的 3D 立方体
我正在为学校开发一个使用 HTML5 和 CSS3 的元素。该元素的目标是教幼儿如何计算简单的方程式。学习这一点的第一步是教他们识别不同形状的数字。第一个练习是:显示一个随机数并让 child 选择
html - 旋转具有透视错误的 3d 立方体？
我用 html 和 css 制作了一个旋转立方体。当我按向右和向左箭头键时，立方体会按预期围绕其中心旋转。但是，当我按下向上和向下箭头键时，它会在更大的空间内旋转。在这种情况下，我也希望它围绕其中
c++ - 未渲染 OpenGL 立方体
我正在努力让立方体在 opengl 中呈现。当我将已经计算出的 MVP 传递给顶点着色器时，它工作正常，但是当我传递模型、 View 和投影然后在顶点着色器中进行计算时，它不显示立方体。当我将顶点着色
c++ - 未显示 OpenGl 立方体
大家好，我是 opengl 世界的新手，所以这就像一个星期我试图了解 opengl 是如何工作的。所以我放下我的代码使用不同的例子，我编译它没有问题。但是立方体没有出现，我不知道为什么。谁能向我解释我
c++ - 平移和缩放后更新 OpenGL 立方体？
我有一个应该绘制立方体的类。它在主体中很好地绘制了我的立方体，但我使用默认的 x、y、z 值创建它，以便默认情况下将其置于屏幕中央。在通过调用 build 绘制立方体后，我想平移和缩放立方体，但我显

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 当我使用像 rotateZ() 这样的 CSS 变换时，为什么我的立方体是 'jump'？