只有 2 张图像的旋转效果答案

【问题标题】：Spinning effect with only 2 images只有 2 张图像的旋转效果
【发布时间】：2012-07-15 13:38:02
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery css animation jquery-animate

【解决方案1】：

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

【讨论】：

【解决方案2】：

例如，您可以使用 jQuery 传输库 http://ricostacruz.com/jquery.transit/ 来做到这一点

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

【讨论】：

【解决方案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/

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

【讨论】：

【解决方案4】：

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

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

transform:rotatey(180deg);
}

【讨论】：