« Google買収の歴史とタイムライン部品のマッシュアップ | メイン | Cumulate Draw オープンソースAjaxドローイングツール »

2006年11月01日

Javascriptで三角形を動かす

Javascriptだけでぐるぐる回る三角推というデモを見つけた。IE6では動かないがIE7やそれ以外のブラウザで動く。

javascript_triangles.PNG

borderを使ってHTML+CSSだけで三角形を書くテクニックは、前にどこかのブログでやってたと思うけど、それを応用して、これだけ複雑な立体を描き、さらに動かすことに成功している。大きな三角形は、水平や垂直線で小さな三角形(実際にはborderをいじったdivタグ)に分割している。

デモでは、Q,W,E,A,S,Dの6つのキーで、回転の方向を自由に変化させることもできる。

投稿者 秋元 : 2006年11月01日 15:56

トラックバック

このエントリーのトラックバックURL:
http://labs.cybozu.co.jp/cgi-bin/mt-admin/mt-tbp.cgi/861

 
mg src="http://img.awasete.com/image.phtml?u=http%3A%2F%2Flabs.cybozu.co.jp%2Fblog%2Fakky%2F" width="160" height="140" alt="あわせて読みたい" border="0">

著書

PHPxWebServiceAPIConnections.jpg

プロフィール

週三日勤務で、残りは個人で活動しています