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

要素を3次元で水平に回転する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素を3次元のy軸で、水平に回転することができます。
講師:
07:27

字幕

このレッスンでは 要素をY軸で水平に回転させます。 そして、さらにマウスポインターを合わせると 正面向きに戻ると こういうインターアクションを 加えたいと思います。 Dreamweaverで開いたのは まだ要素を回転していない HTMLドキュメントです。 3つの画像とテキストのセットというのは リストで組み立てられています。 そのul要素には id「books」が設定されています。 その中のli要素に 画像を回転する画像があります。 img要素ですね。 テキストの領域はdiv要素クラス 「bookinfo」という中に 入っています。 では回転する前の状況を確認しましょう。 ファイルメニューから、 ブラウザーでプレビューです。 まだ正面向きですし、 もちろんインターアクションは この影がちょっと変わる というところしかありません。 では、さっそく回転させてみたいと思います。 Dreamweaverに戻りましょう。 CSSを確認しましょう。 まず、画像の方です。 画像は id「books」の中の li要素の中に「img」があります。 これを回転しようということですから、ここに プロパティを設定します。 回転は「transform」です。 回転だけではなくて、 移動、伸縮などもできます。 そして、回転の関数というのが 「rotateY」と。 ちょっとヒントの中に出てこないので Yは手で付け加えます。 そして、単位は度数です。 30度回転しましょう。 これで確認してみます。 ファイルを保存して、 ブラウザーでプレビュー。 回転しました。 してないと思われるかもしれませんが 幅が詰まっていますね。 ですから、回転したので 幅が狭く見えるわけです。 ところが問題は、遠近感がありません。 本当でしたら、左側が手前で右側が奥です。 ということは、左に比べて右側の丈が 詰まっていなかければならないのですけど その遠近感がありません。 遠近感を設定するプロパティを 加えないといけないということなんです。 Dreamweaverに戻りましょう。 遠近感を加えるのは リスト「books」の中のli要素ですね。 ここに加えますが 実はその前にもう一つ、 プロパティを設定しなければいけません。 「transform」をする時に、 ちゃんと3Dの効果を付けてくださいと お願いするプロパティがあります。 それが「transform style」 というプロパティです。 そして「preserve-3d」 3Dでやってください、ということですね。 これを選択します。 そして遠近感というのは 「perspective」という 言い方をします。 プロパティもそのまま 「perspective」です。 ここで数字を指定するのですが 初めて設定する時は、 いくつを入れたらいいのかわかりませんね。 ピクセル単位で入れるんですけども ではちょっと CSSリファレンスの方を見てみましょう。 MDNのCSSリファレンスで 「perspective」のページを 開きました。 それをちょっとスクロールしてみますと 例が実際に出ていますね。 そして、それぞれの場合 perspectiveに何ピクセルを 設定しているのかと書いてあります。 もちろん、要素の大きさによって相対的に 遠近感の感じは変わるんですけれども ともかく数字が大きい方と 小さい方で言いますと 大きい方が遠近感は薄れます。 小さい方が遠近感が強まります。 これはカメラのレンズでいう 望遠とか広角と同じなんですけれども あの焦点距離に相当します。 望遠ですと、焦点距離が長く 遠くのものが大きく見える、 とつい思ってしまうかもしれませんが 遠近感について言えば、 望遠ですと遠近感が減るんですね。 広角になると、遠近感が強調されます。 ですから、あんまり数字を小さくすると かなり誇張された感じになりますので 実際に数字を試して、 適切な値を使ってください。 では、Dreamweaverに 戻りましょう。 ここでは「perspective」を 500ピクセルとします。 これで改めて確認しましょう。 ファイルを保存して、 ブラウザーでプレビューします。 今度はちゃんと遠近感がついて 回転されましたね。 では、テキストの領域の方も 同じように回転することにします。 Dreamweaverに戻ります。 テキストの領域は、 クラス「bookinfo」でした。 すでに実はtransformが 使ってあります。 テキストの領域を 手前に持ってくるための 「translateZ」です。 これに追加して rotateを入れます。 「rotateY」ですね。 同じように30度回転させます。 確認しましょう。 保存して、ブラウザーでプレビューです。 ちゃんと、テキストの領域も回転しました。 今度はマウスポインターを重ねた時に 元に戻すという部分です。 画像は「books li img」でした。 ここにホバーした場合ということで セレクターを加えます。 id「books」 「li」の 擬似クラスですね、「hover」 そして、「img」 ここに 「transform」で 「rotate」 「Y」 そして、30度回していたのを ゼロに戻せばいいわけですね。 同じように、 今度はbookinfoの方です。 こちらはすでにホバーの場合の セレクターが作られていますので もっとも2つ 「rotateY」だけでなくて 「translateZ」もありますので、 コピーしちゃいましょう。 ペーストします。 そして、「rotate」の方を ゼロにします。 ついでですから 「translateZ」の方も 変えましょう。 正面向きの場合に、 手前にせり出すようにしたいと思います。 ですから、数字を上げました。 これで保存しましょう。 確認します。 ブラウザーでプレビュー。 マウスポインターを重ねると ちゃんと正面向きになります。 あと、言われないとわかりませんけれども 斜めになっている時よりも、 正面を向いた時の方が テキストの領域が近づくと いうことになっています。 このレッスンでは 要素を Y軸で水平に回転させました。 その場合使うプロパティは 「transform」で、 関数は「rotateY」です。 単位は度数で設定します。 ただし、ちゃんと遠近感を加えるためには transform styleプロパティで 「preserve-3d」とし 「perspective」に 適切なピクセル数を与えてください。

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

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

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

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

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

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