Разработка, увы, не только под мобильники, а под все браузеры, включая Safari для Apple iPad. В этом и загвоздка, иначе бы молча использовал flash.
Вот пример того что сделал я (для примера взял лого Mercedes
). Использовал библиотеку "Raphaël".
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>test</title>
<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script type="text/javascript">
var paper;
var logo;
function init()
{
paper = Raphael(document.getElementById("cnt"), 300, 298);
logo = paper.image("http://www.mobus.com/modules/news/images/articles/changing/1214202134387587_200_200.jpg", 0, 0, 300, 298);
}
function rotate()
{
logo.animate({height:0, y:149},500, function()
{
logo.transform("s1,-1");
logo.animate({height:298, y:0},500, function()
{
logo.animate({height:0, y:149},500, function()
{
logo.transform("s1,1");
logo.animate({height:298, y:0},500);
});
});
});
}
</script>
</head>
<body onLoad="init();">
<div id='cnt' onClick="rotate();" style="cursor:pointer;"></div>
</body>
</html>
Иными словами, лого должен делать полный оборот и возвращатся в исходное положение. Псевдо 3D выглядит не очень.
Canvas даст тот же результат, только реализация другая.
Вот SVG сейчас курю.
