はじめてのCSS3アニメーション

transformプロパティを使った回転・伸縮・移動

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素を回転・伸縮・移動できるプロパティtransformの構文をご説明します。
講師:
03:01

字幕

このレッスンでは 要素の 拡大 縮小や 回転や 移動が出来る transform と言うプロパティについて ご説明します 文法的な内容の解説になります 今 開いているのは MDN の CSS リファレンス その transform のページです transform の構文を 確かめようとすると 下の方に transform プロパティの後に transform-function と書いてあります これは 日本語では 変換関数と言うんですが 回転とか 拡大 縮小 それから 移動 それぞれについて 関数が定められているので それを 指定します しかも それらを組み合わせて 複数 設定する事が出来ます どんなものがあるかと言うと まず この右の方に 結構 たくさんあります そして 下にスクロールして行けば 具体的な内容が出てきます ただ これらを全て説明していると大変ですし よく使われるものを 3つほど ご紹介したいと思います transform プロパティの構文は 今さっき確認した通り プロパティの後に 変換関数を定めます 複数定める事も出来ますが その 一番使われるものとして 3つほど挙げます 1つは 回転すると 言う rotate と 言う関数です 括弧の中には 角度を入れます 次に 伸縮 伸び縮みをさせると言うのは scale です x 方向 y 方向とありますが y 方向の間に カンマの前に 角括弧が付いていますね この角括弧が付いているものと言うのは オプションです 省略が可能です ですから もし1つだけ y 方向を省いた場合 どうなるかと言うと x と y 同じ比率 拡大 縮小します x と y と違う値にしたい場合には x 方向とカンマで y 方向を指定すればいいと 言う事です それから3つめ これは 移動で  translate と言う関数です こちらも x カンマ y なっていて y が省略出来ます でもこちらの方は x だけしか入れてない場合 y は動かない y は0とみなされます x だけ動かしたい場合には x だけ入れればいいと では y だけ動かしたい場合 これは x を入れてください 0と入れてカンマで y 方向の値を入れると 言う そう言う指定の仕方になります このレッスンでは 要素の 回転や 伸縮 移動が出来る transform プロパティ について説明しました transform プロパティの構文は transform のプロパティの後に 変換関数を入れます 関数はたくさんあるんですけれども とりあえず 回転の rotate 伸縮の scale それから 移動の translate あたりから 使ってみるといいでしょう

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

2時間39分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月17日

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

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

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