3

我们只有 2 张瓶子的图像（正面和背面），但想创造某种旋转效果。我试图用 jquery 或 CSS 来想办法做到这一点——也许是模糊。想不出好办法。

他们想按下一个按钮来查看瓶子的另一面（旋转到那里）。

关于我如何做到这一点的任何想法？

4

4 回答 4

3

看看CSS Coke can的例子。这可能会帮助您获得一些快速的结果，或者至少可以作为新想法的基础。（这里是英文，它也更容易显示发生了什么）。为此，您唯一需要的 JS 就是执行实际的“滚动”。

于 2012-07-16T16:52:02.050 回答
0

例如，您可以使用 jQuery 中转库http://ricostacruz.com/jquery.transit/来执行此操作

$('button').on('click', function(){
  $('.bottle').transition({
    perspective: '100px',
    rotateY: '180deg'
  });
});
于 2012-07-16T16:52:01.433 回答
0

将第一张图像（正面）左侧边距的宽度设置为width: 300px; margin-left: 0px动画width: 0px; margin-left: 150px。动画完成后，将第二张图像的动画从width: 0px; margin-left: 150px到width: 300px; margin-left: 0px。

您可以.animate()为此目的使用： http: //api.jquery.com/animate/

我希望这回答了你的问题。

于 2012-07-16T16:55:30.550 回答
0

http://css3.bradshawenterprises.com/cfimg/

使用按钮查看演示 2 以了解交叉淡入淡出。要让它旋转，添加如下内容：

transform:rotatey(180deg);
}
于 2012-07-16T17:00:31.740 回答