只用两张图片实现旋转效果

Question

我们只有一张瓶子的图片（正面和背面），但想要创建某种旋转效果。我试图想出一些使用jquery或仅使用CSS的方法——也许是通过模糊来实现。但是无法想出一个好的方法。

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

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

- smcdrc

Answer 1

请查看纯CSS可乐罐示例。这可能会帮助您获得一些快速结果或作为新想法的基础。（英文在这里，还可以更简单地展示正在发生的事情）。 您唯一需要的JS是执行实际“滚动”的JS代码。

- RobIII

Answer 2

你可以使用 jQuery transit 库 http://ricostacruz.com/jquery.transit/ 来实现这个功能。

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

- gherkins

Answer 3

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

查看演示二以了解如何使用按钮实现淡入淡出效果。要让它旋转，可以加入类似下面的代码：

transform:rotatey(180deg);
}

- imakeitpretty

Answer 4

将第一张图片（正面）的宽度和左边距动画从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/

希望这回答了您的问题。

- Lorenz