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

要素を3次元で扱う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
チャプターをとおして学習した要素を3次元で扱うためのプロパティや設定をまとめます。
講師:
02:19

字幕

このレッスンでは チャプターを通じて 作ったコンテンツの中から 3Dに関わる項目を 拾い出して まとめてみたいと思います 作ったのは 3つの画像と テキストのセットです それが 3Dでー 垂直軸で 水平に回転しています そしてまた この画像と テキストの城壁の間には 実は Z方向の 座標の差があります この中で どのような 3Dの項目を使ったか? プロパティーなどについて まとめましょう まず 3Dの変換については "transform" プロパティーに 3Dを変換する 関数を指定します 関数としては まず移動が "translate"に なりますけれども それに"XYZ" を付けます そして回転については "rotate" です それに XYZがついて 回転になります 水平方向の回転というのは Y軸の回転ですので "rotateY" を使います そして 伸縮をしたい という場合には "scale"というキーワードに なりますけれども やはり XYZで それぞれの軸向きに 伸び縮みさせることが できます それから transformプロパティー以外に 3Dの効果を使うために 使わなければならない点です "transform-style"の プロパティーを "preserve-3d" にしないと 3Dの効果が得られません 遠近感を与えるには "perspective" を 設定します 数値で設定するのですが 数値が小さいほど 遠近感は 強くなります 広角レンズの効果です 数値が大きいと 遠近感が あまり感じられなくなります 望遠レンズですね このレッスンでは チャプターを通じて作った コンテンツの中の 3Dに関わる項目を おさらいしました HTMLドキュメントを 開いてみますけれども transform プロパティーで "translateZ" Z軸の方向の移動 "rotateY" Y軸の回転を使っています "transform-style" に "preserve-3d"の 設定があります perspectiveを設定しないと 遠近感が得られません

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

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

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

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

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

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