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悬停：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您希望旋转div始终面向用户，您可以在translatez属性之后添加另一个旋转：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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之类的非必需品，然后再将其移动。你以后总是可以担心这些事情。

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

3D在X轴上围绕圆变换

2 个答案:

编辑：已修复。