CSS3のアニメーションテクニック

要素を傾斜させる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transformプロパティにskewX()やskewY()関数を定めると、要素が傾斜できます。
講師:
05:13

字幕

このレッスンでは 要素を傾ける関数をご紹介します このフォトギャラリーの左下を見ると 影が少し傾いています このようにすると 左下隅が少し 持ち上がっている様に見えますね こうした効果を 試してみたいと思います 画面に開いているのは MDNのCSSリファレンスです 傾ける関数というのは トランスフォーム プロパティで使います 実際にスクロールして見てみると スキューというのが傾斜 傾ける という意味になるんですけれども スキューX スキューYと 2つ の関数があります Xの方は 水平方向に 指定された角度 傾けます それからスキューYの方は 垂直方向に 指定された角度 傾斜させます それから 上の方にですね スキューという関数があって XとY 両方指定できました けれどもこれは 初期の草案にあった関数で そのあと除かれたので 使わないで下さい ドリームウィーバーで開いている HTMLドキュメントは 下端に影はついています けれども傾いていないで 水平なままという状態です 影をどのようにつけているかというと ボディ要素を見ますが フォトギャラリー全体は div 要素 ギャラリーというIDの div要素で囲まれています そしてCSSでは その ギャラリーに対して ビフォー擬似要素で からっぽのコンテンツ 要素を加え その 下端に 影をつけていると そういう仕組みになっています では現在の状況を確認しましょう ブラウザーでプレビューします 下端に 少し濃い目の影が ついていますね これを傾けていこうということです まず スキューXから試しましょう このボックスシャドウの下に加えましょうか トランスフォームで指定しますね そして スキューX 角度はわかりやすく 45度程度 加えましょう 単位はディグリーです 度数です ではこれで保存して 確認してみます ファイルを保存して ブラウザーでプレビューします 傾いていますね ちょっと見えにくいですか では 座標を ボトムを マイナス20と してみると いいでしょう 改めて保存しなおして プレビューすると 今度は下にずれましたので 45度 傾いていますね ちょうど上と下を 左右に引っ張ったような傾き方ですね これが水平の傾きになります では プレビューバーにもう1回戻りましょう 実際に使うのは スキューYの方です ですから Xを Yに変えて 角度はそんなに大きくなくても わかりますので マイナス 反時計回りということになりますね ボトムも0にして大丈夫でしょう これで保存して確認します ブラウザーでプレビューです 垂直方向に傾いてますね マイナス4度 反時計回りに傾いているということです では 仕上げに移っていきます 影は左側に寄せますので 幅は縮めてしまいましょう 60%にします それから ちょっと左側に余裕を持たせたいと思います ということで レフトを10ピクセル あけます もう一度確認します ファイルを保存して ブラウザーでプレビュー 影がつきましたね かなり完成に近いんですが このはみ出ている部分 余分です ここを調整しましょう ドリームウィーバーに戻ります 予め測っておいたんですが ボトムは13ほど 持ち上げれば良さそうです では確認しましょう ブラウザーでプレビューすると これで思い通りの影になりました 左下が少し斜めの影がついているので 左下隅が少し持ち上がったような表現と いうことです このレッスンでは 要素を斜めに傾ける スキューX スキューY という 変換関数についてご説明しました 構文はトランスフォーム プロパティに設定します そしてスキューXの方は 要素を水平に 指定した角度傾斜します スキューYは 今度は垂直に 指定角度傾斜します そして注意は スキュー は古いので使わないでください

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。