只有2张图像的旋转效果

Question

我们只有2个瓶子图像（正面和背面），但想创造某种旋转效果。我试图想办法用jquery或者只是CSS来做这件事 - 可能会模糊不清。想不出一个好方法。

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

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

Answer 1

查看CSS Coke can示例。这可能有助于您获得一些快速结果，或者至少可以作为新想法的基础。 （英文here，它也显示出更容易发生的事情）。 你需要的唯一JS就是做实际的“滚动”。

Answer 2

例如，您可以使用jQuery传输库http://ricostacruz.com/jquery.transit/

来执行此操作

$('button').on('click', function(){
  $('.bottle').transition({
    perspective: '100px',
    rotateY: '180deg'
  });
});

Answer 3

将第一张图片（正面）左侧的宽度设置为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/

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

Answer 4

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

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

transform:rotatey(180deg);
}