CSS3で作るダイナミックな3D表現 (2/2)STEP 3：クリックによる回転 画像を全面に表示した直方体が完成したので、ナビゲーションがクリックされたら回転するアニメーションを作る。直方体をrotateXで90度回転させると底面が正面に変わり、正面は上面へ移動する。同様に、今度はrotateXを180度回転させると、初期状態で正面だった面は上面から背面になり、正面は初期状態の背面になる。 回転する角度は、ナビゲーションとなるa要素にカスタムデータ属性「data-deg」を設定して格納する。a要素がクリックされるとjQueryでdata-degの値を読み出し、transformプロパティの引数に指定する。これで、ナビゲーションごとに指定された角度にページ全体が回転するようになる。 ■ソースコード（HTML） <div class="nav"> <ul> <li><a data-deg="0" class="active" href
