エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSS3で作るダイナミックな3D表現 (2/2)
STEP 3:クリックによる回転 画像を全面に表示した直方体が完成したので、ナビゲーションがクリックされ... 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