jsdo.itに投稿した3つの実験(というか遊び)について
くるくるディスプレイ
くるくるディスプレイ - jsdo.it - share JavaScript, HTML5 and CSS
EOF;?>
トップページでコンテンツ内のサムネイルを並べているようなサイトで、ちょっとしたアニメーションで遊びたい、という場合などに使っていただけるのではないでしょうか。
ただ残念なことに現在、css3のtransitionの対応状況がまちまちで、webkit系(chrome safari)でしか正しく動作しないこと、さらにはrotateY(Y方向に回転)というパラメータの挙動にも差異がある(X方向に回転してしまうケースもある)という状況です。
css3 next/prev button + 簡易カウンタ
css3 next/prev button + 簡易カウンタ - jsdo.it - share JavaScript, HTML5 and CSS
EOF;?>
css3で、押した時の状態も含めてどれくらいリアルに作れるかを検証しました。それだけでは寂しいのでjQueryで簡易カウンタを作成しました。使いみちは、貴方次第!
ボタンを追加し均等な幅に並べる
ボタンを追加し均等な幅に並べる - jsdo.it - share JavaScript, HTML5 and CSS
EOF;?>
「ボタンを一列に並べたい。その際、常に横幅いっぱいの大きさになるようにしたい。ボタンを追加するのは、cssをいじらずhtmlに要素を追加するだけでできるようにしたい」という要望に答えて作成したソースの応用で作ってみました。これも使い方は、貴方次第!
※これらの実験(というか遊び)は、css3を多用しており、Google Chromeを基準ブラウザとしております。ご了承ください。