围绕 X 轴上的圆进行 3D 变换

Question

我正在尝试创建一个 CSS 动画，其中 div 围绕 X 轴上的图像（或另一个 div）旋转。
我可以在 http://codepen.io/Kupe517/pen/zBKGev 处大致了解它，但动画 div 没有我正在寻找的旋转效果。我想我需要在转换中添加某种 rotateX() 并添加透视图，但我就是想不出正确的组合。我附上了我想要实现的那种动画的粗略图像。

这是我当前的动画代码：

@keyframes moveBack { 
 0%{transform:translateY(0); z-index:10;}
 25%{transform:translateY(435px); z-index:10;}
 26%{z-index:0;}
 50%{transform:translateY(0) scale(.8); z-index:0;}
 75%{transform:translateY(-435px); z-index:0;}
 76%{z-index:10;}
 100%{transform:translateY(0); z-index:10;}
}

Answer 1

我为这个答案感到难过；我会让动画准确无误。一瞬间-

编辑：修复。

有点草率，但这是您所追求的概念的一个工作示例。玩弄数字以获得您想要的结果。很难从图表中看出您正在寻找哪种类型的流程：

http://codepen.io/anon/pen/JKRxmY?editors=1100 （你有一个我没看到的令人讨厌的起源属性。加入一些 TranslateZ 规则来稍微清理一下。）

我也在改变方向后分叉了这个工作示例： http://codepen.io/anon/pen/WxGPpM?editors=0110 （和原创）http://codepen.io/pukidepa/pen/nkJmv?editors=0110

这里的关键是 transform:rotateY(Xdeg);

尝试一些代码。这是您的动画 CSS 的原样：

@keyframes moveBack {
  0% {
    transform: translateY(0) translateZ(100px) rotateX(0deg);
    z-index: 10;
  }
  25% {
    transform: translateY(125%) translateZ(-50px) rotateX(-70deg);
    z-index: 10;
  }
  50% {
    transform: translateY(0%) translateZ(-100px) rotateX(-180deg);
    z-index: 10;
  }
  75% {
    transform: translateY(-125%) translateZ(-50px) rotateX(-270deg);
    z-index: 10;
  }
  100% {
    transform: translateZ(25px) translateZ(100px) rotateX(-360deg);
    z-index: 10;
  }
}

提示：在使用这些类型的旋转时，最好先删除 z-index 等不必要的部分，然后将运动向下移动。您以后可以随时担心这些事情。

对于更圆的旋转，您可能希望将旋转效果与平移交错。换句话说，尝试在动画的不同点让其中一种效果稍微先于另一种效果发生。

Answer 2

这是一个简单的 3d 过渡，看起来像您要实现的目标。问题是您正在使用 translate 但您的目标是在 X 轴上旋转。要启动转换，请将鼠标悬停在 div:

div{
  position:relative;
  width:300px; height:200px;
  margin:10% auto;
  perspective:500px;
  transform-style:preserve-3d;
  border:1px solid #000;
}
img{width:100%;}
p{
  position:absolute;
  left:250px; top:75px;
  width:80px; height:40px;
  margin:0; padding:5px 10px;
  background:gold;
  transform: rotateX(0deg) translatez(110px);
  transition:transform 2s;
}
div:hover p{
  transform: rotateX(360deg) translatez(110px);
}

<div>
  <img src="http://i.imgur.com/k8BtMvj.jpg"/>
  <p>Hover the div</p>
</div>

如果你想让旋转的div一直面向用户，你可以在translatez属性之后再添加一个旋转，像这样：

div{
  position:relative;
  width:300px; height:200px;
  margin:10% auto;
  perspective:500px;
  transform-style:preserve-3d;
  border:1px solid #000;
}
img{width:100%;}
p{
  position:absolute;
  left:250px; top:75px;
  width:80px; height:40px;
  margin:0; padding:5px 10px;
  background:gold;
  transform: rotateX(0deg) translatez(130px) rotateX(0deg);
  transition:transform 5s;
}
div:hover p{
  transform: rotateX(360deg) translatez(130px) rotateX(-360deg);
}

<div>
  <img src="http://i.imgur.com/k8BtMvj.jpg"/>
  <p>Hover the div</p>
</div>

之所以可行，是因为当您在同一个声明中链接变换属性时，最后一个是根据前面的属性创建的。坐标系随之前的变换移动。

围绕 X 轴上的圆进行 3D 变换

3D Transform around circle on the X axis

css

animation

css-transforms

css-animations

编辑：修复。

围绕 X 轴上的圆进行 3D 变换

3D Transform around circle on the X axis

css

animation

css-transforms

css-animations

编辑： 修复。

编辑：修复。