3D在X轴上围绕圆变换

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

这是一个简单的3D过渡,看起来就像你想要实现的那样.问题是你正在使用翻译,但你的目标是在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>

这些工作是因为当你在同一个声明上链接变换属性时,最后一个是根据前一个声明制作的.坐标系随先前的变换移动.