绕X轴圆形进行3D变换

Question

我正在尝试创建一个CSS动画，它看起来像一个div围绕着一张图片（或另一个div）在X轴上旋转。
我已经创建了大致的想法: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;}
}

- Kupe

---

你可以尝试使用CSS3 3D旋转：例如transform:rotateX（-100deg）; 这里有一个链接，提供更详细的信息。http://www.w3schools.com/css/css3_3dtransforms.asp - Kyle Pastor

Answer 1

这里有一个简单的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>

这些技术之所以有效，是因为当您在同一声明中链接变换属性时，最后一个属性是根据先前的属性进行的。坐标系会随着先前的变换而移动。

- web-tiki

---

太棒了！这正是我在寻找的动画效果。感谢您的解释和提供的代码！ - Kupe

Answer 2

很抱歉这个答案不准确，我会让动画变得更加精确。稍等一下-

编辑: 已修复。

这是一个可行的示例，可以尝试调整数字以达到所需效果，但有点杂乱无章，很难从图表中看出您要寻找的流程类型：

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，然后只关注运动。之后再考虑这些问题。

如果想要更加圆滑的旋转效果，可以尝试将旋转和平移的效果错开。换句话说，在不同的动画点上让其中一个效果稍微提前发生。

- MassDebates

---

请告诉我是否需要进一步修改，或者我是否误解了您的图表。 - MassDebates

这绝对更接近我所想的！你的动画（以及我的）看起来像是在一个方形路径上运动，然后变成了平滑的圆形路径。也许只需要添加更多的关键帧？你提供的另一个例子看起来就像我要找的那种。我认为在这两个例子之间，我可以弄清楚它。谢谢！ - Kupe

没问题。更多的关键帧会更加流畅。别忘了透视和起点！ - MassDebates