画面幅が狭いと動作を確認しにくいかと思います、リンク先で御覧頂いたら快適かと思います
3Dに整列されたDIV要素をクリックする事で手前に持ってくるものです
後ろに並ばされているものは、順序が維持されます
要素と連動して 右側の文字も入れ替わります
要素の数を増やすには、適当にDIVとSPANを増やすだけでは動かないようで調整する必要があります
CSSを幾つか追加と数値の修正で要素を増やすことが出来ます
HTMLの方はとてもシンプルです
ウェブサイトのヘッダー辺りに設置するのも良いかと思います
コード一式をダウンロード出来ます
Download Zip
オススメ記事
HTMLのinput rangeのスライダーで数値をjQueryでリアルタイムに取得する
jQuery UI sortable を使ってD&Dでリストの並び替えを実装する。
jQueryで追加した要素に対してクリックイベントが有効な書き方
javascript 配列を for in を使ってキーと値を取り出すループ
jQueryでキーボードの入力と合わせて入力されたキーを取得するあれこれ
layzr.js を使って iframe を遅延読み込みする
javascriptで対象タグを選択状態にする
javascriptでクリップボードへ直接コピーさせる document.execCommand(‘copy’)
広告が非常にされている時に当たり障りのないようにブロックする表示を作ってみた
jQueryで自動で見出しリストとアンカーリンクを作る
QRコードを自動で生成するjQueryプラグイン「jquery.qrcode.js」の使い方
javascript で奇数、偶数、倍数で条件分岐する方法
jQuery 3.0 での.load .unload .errer の廃止での代用する方法
ページを開いた時に画像をフェードイン・フェードアウトするプラグイン
jQueryを使ってサイトに表示するメールアドレスを収集BOTから簡易的に守る
ページを開いた時に画像をフェードイン、フェードアウトで表示してから コンテンツを表示させる
jQuery（javascript）を使っている時にエラーや結果を出力してチェックする方法
PHP+wkhtmltoimage でウェブサイトのスクリーンショット・サムネイルを作成する
PHPからmb_send_mail()でメールを送信する
郵便番号を入力すると住所をリアルタイムで補完してくれるjQueryプラグイン「jquery.jpostal.js」
COMMENT