CSS3によるタイポグラフィ

要素を3次元で回転する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transformプロパティと回転の関数で、要素を3次元で回転することができます。
講師:
05:49

字幕

このレッスンでは 要素を三次元で回転させるための CSS の設定について ご説明します 今 ブラウザで開いている html ドキュメントですが 文字の下半分が XY 平面で時計回りに回転しています もっとも XY 平面の回転だと 二次元の回転と変わりません レッスンの中では X 軸の回転 Y 軸の回転に ついてもご説明します Dreamweaver CC で開いた html ドキュメントでは まだ 文字に対して 回転の設定を与えていません 回転させたいのは この p 要素です p 要素に文字が入っていて これを回転させます まだ 回転する前の状態を 確認しましょう 「ファイル」メニューで 「ブラウザでプレビュー」です 文字の上半分が ハッキリクッキリした三次元風 下半分が水に沈んだように ぼけています この 下半分の文字を回転させます 回転させる要素のセレクターは p です 回転ですが 二次元 三次元に関わらず 回転のプロパティ設定は transform プロパティに対して 行います そして rotate() は 二次元の回転になります 今回は三次元でご説明したいと思います 三次元の場合 どの軸で回転するかを最初に設定します 関数がそれぞれ異なっています まず X 軸 Y 軸 Z 軸を この rotate の後に入れます Y 軸 からいってみましょう X を飛ばして () の中には角度を入れます 45 度で単位は deg です これで確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です Y 軸 垂直の軸で回転しました 幅が詰まったようにしか 見えないかもしれませんけど 垂直軸で回転するということは 結果としてはそういうことです 次に X 軸です X 軸で回転するには この rotate の軸を Y から X に変えるだけです では 「ファイル」を「保存」して 「ブラウザでプレビュー」します Y 軸よりも分かりにくいです X 軸で回転とは 鉄棒の様に前後に回ることになります ですから 丈が詰まった様に 見える結果になります どう回っているのか 三次元風に見えないと思いますが 三次元で回転しています ということで 結果として分かりやすいので Z を選ぶのですが Z 軸で回転すれば XY 平面で 二次元で回転するのと 結果としては同じですが 三次元の関数によって回転しています 中心がこの辺でしょうか? 時計回りに回転しています 今は 「 SUBMERGE 」の 下半分の文字が そのまま回転しています これを 一文字ずつ 回転させてたいと思います p 要素には単語「 Submerge 」が 1つのテキストとして入っています それぞれを回転するには これを切り分けないといけないのですが 実は切り分けはしてあります それは jQuery のプラグインである Lettering.js を使って jQuery の JavaScript コードで p 要素に対して lettering() という Lettering.js のメソッドを 呼び出しています すると この JavaScript コードによって p 要素の中のテキストが 一文字ずつ span 要素に 含まれることになります ですから span 要素に対して 回転の設定を加えれば良いので ここに span とセレクターを加えて プロパティの設定は同じですので transform の設定を このまま持ってきます では 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です どう見ても 回転しているようには見えません! 実はプロパティの設定が もう1つ必要です それを加えましょう 回転などの座標変換 変形の操作を加えるには diaplay プロパティの設定を inline-block にする必要があります これで 文字が一文字ずつ Z 軸で回転します 「ファイル」を「保存」して 「ブラウザでプレビュー」しましょう 今度は一文字ずつ 時計回りに回っています 45 度回転しています このレッスンでは 要素を回転する CSS の設定について ご説明しました 使うプロパティは transform 関数は 回転の場合 rotate X Y Z で 引数には角度を 単位 deg を付けて設定します それから 回転の変換などを 与えるためには display プロパティに inline-block の設定をする必要が あることも覚えておいてください

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

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

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

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

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