iPhoneでCSSを使って要素を3Dっぽく回転させる方法
Tweet
最近iPhoneをいじっていなかったので、久々にiPhoneネタです。
今回はiPhoneでJavaScriptを使って、要素を3Dっぽく回転させる方法をご紹介いたします。
静止画なのでわかりづらいのですが、右にクルクル回転しながら進んでいきます。
この状態からアニメーションスタート(モアレがひどくてすいません)
クルクルと回転していきます。
文字が裏返っているのが面白いですね
サンプルコードは次の通りです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" />
<script type="text/javascript">
function animationStart() {
var el = document.getElementById("target");
el.style.webkitTransition = '-webkit-transform 3s ease-in-out';
el.style.webkitTransform = 'translate(180px,40px) rotateY(180deg)';
}
</script>
</head>
<body>
<input type="button" name="hoge" value="animation" onClick="animationStart();" />
<div id="target" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:10px;">ABCDEFG</div>
</body>
</html>
ポイントは「rotateY(180deg)」の部分で、rotateYのように書くと、横方向にクルクルと回転します。
iPhoneをお持ちの方はこちらのページからお試しください。
→ 3D回転のサンプルページ
この方法を使えば、苦労せずに3Dっぽいアニメーションを表現することができます。
参考にさせていただいたサイトはこちらです。
→ iPhone向けサイトを考える iPhone・Safariで要素を3D回転 [blog.livedoor.jp]
関連:
- iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法
- iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法
- iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」
10月 17th, 2008 at 16:01:24
「JavaScriptを使って」というより、CSS3を使ったと言うべきでしょう。
こんな簡単にアニメーションができるなんてオモシロいですね。
10月 17th, 2008 at 20:21:53
beeさん
お、その通りですね。
起動でJavaScriptを使っているため、ついついあまり考えずにそう書いてしまいました。
タイトルを修正しておきますね。
ご指摘ありがとうございました。