iPhoneでCSSを使って要素を3Dっぽく回転させる方法 | ke-tai.org - インフィニットループ

iPhoneでCSSを使って要素を3Dっぽく回転させる方法
    このエントリをはてなブックマークに登録

最近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]

 

関連:


 

最近の記事







2 Responses to “iPhoneでCSSを使って要素を3Dっぽく回転させる方法”

  1. 「JavaScriptを使って」というより、CSS3を使ったと言うべきでしょう。
    こんな簡単にアニメーションができるなんてオモシロいですね。

  2. beeさん

    お、その通りですね。
    起動でJavaScriptを使っているため、ついついあまり考えずにそう書いてしまいました。
    タイトルを修正しておきますね。
    ご指摘ありがとうございました。

コメントを書く