簡単なチュートリアル
これは、非常にクールな jQuery と CSS3 の 3D 回転プロジェクト表示テンプレートです。このテンプレートは、CSS3 3D 変換を使用して 3D 立方体回転効果を作成し、各項目が切り替え時に立方体回転効果を表示します。
使用方法
HTML 構造
HTML 構造には 2 つの部分が含まれています: nav.cd-3d-portfolio-navigation はプロジェクトのナビゲーションであり、もう 1 つは各プロジェクトをラップするために使用される div.projects です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
|
JavaScript
3D 効果を実現するために、Portfolio3D オブジェクトがテンプレート内に作成され、bindEvents 関数を使用してイベントをバインドします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
visibleFace プロパティは、立方体の現在表示されている面を保存するために使用されます。
ユーザーが特定の項目タイプを回転すると、showNewContent() メソッドが正しい立方体の面を表示し、ul.row 内の要素を回転するために使用されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
上記は jQuery と CSS3 の 3D 回転プロジェクト表示テンプレートの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。