VIDEO LESSON

CSSのtransform-originの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:45動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、トランスフォーム・オリジンです。
0:07前回まででトランジションの四つの担当を見てきました。
0:11今回からは変形、トランスフォームの仲間に入ります。
0:15トランスフォーム・オリジンは、要素を回転させたり拡大したりするときの「基準点」を決める指定です。
0:22紙を画鋲で留めて回す場面を思い浮かべてください。
0:26画鋲の位置が違えば、同じだけ回しても紙の向きと位置は変わります。
0:31その画鋲の位置を決めるのが、このプロパティの役割です。
0:35このあと、書き方、キーワードやパーセントでの指定のしかた、実際の回転での見え方の違い、
0:40そして効かないときの調べ方まで、順番に確認していきます。
0:46書き方を確認します。
0:47トランスフォーム・オリジンは、変形させたい要素に、トランスフォームと並べて書きます。
0:54値には位置を書きます。
0:55たとえば、レフト・トップと書けば、要素の左上が基準点になります。
1:00位置は原則として、横方向、縦方向の順に二つ並べて表します。
1:05プロパティ名の後ろにコロン、値の最後にセミコロンを書く、という宣言の基本はこれまでと同じです。
1:12なお、基準点だけを書いても要素は動きません。
1:15回転や拡大といった変形そのものは、トランスフォームの担当です。
1:20この二つは、いつもセットで考えてください。
1:23初期値と継承を確認します。
1:25このプロパティの初期値は、フィフティー・パーセント、フィフティー・パーセント、
1:29ゼロです。
1:32パーセントは要素自身の幅と高さに対する割合なので、これは要素のちょうど中心を指します。
1:39つまり、トランスフォーム・オリジンを書かなければ、変形は中心を基準に行われます。
1:45そして、このプロパティは親から子へ継承しません。
1:48親に基準点を設定しても、子の変形には影響しないので、変形させる要素ごとに指定するのが基本です。
1:56回転が思いと違う位置で起きたら、まずこの初期値のことを思い出してください。
2:01位置の書き方を見ていきます。
2:04いちばん分かりやすいのはキーワードです。
2:07横方向には、レフト、センター、ライト。
2:10縦方向には、トップ、センター、ボトムが使えます。
2:14ライト・ボトムなら右下、レフト・トップなら左上という具合です。
2:19値を一つだけ書いた場合は、もう一方はセンターとして扱われます。
2:24たとえば、トップだけなら「上辺の中央」が基準点です。
2:29キーワードは、要素の端や角を基準にしたいときに便利で、コードを読む人にも意図が伝わりやすい書き方です。
2:37まずはこのキーワードから使い始めるのがおすすめです。
2:41キーワードの代わりに、パーセントや長さでも指定できます。
2:46パーセントは、要素の幅と高さを基準にした割合です。
2:50ゼロパーセント、ゼロパーセントは左上、つまりレフト・トップと同じ位置で、
2:55百パーセント、百パーセントは右下と同じ位置になります。
3:01二十五パーセント、七十五パーセントのように、角や中心以外の位置も細かく指定できます。
3:08また、ピクセルなどの長さで、左上からどれだけずらすか、という書き方もできます。
3:14要素の大きさが変わるデザインでは、割合で書くほうが意図した位置関係を保ちやすいでしょう。
3:21ここからは、ブラウザーで比べられる実例で確認します。
3:25エイチティーエムエルでは、ステージという親要素の中に、デモという箱を一つ置きます。
3:32スタイルシートでは、まず土台を整えます。
3:35ステージに最大幅と余白を持たせ、デモには内側の余白、緑色の枠線、薄い背景色を付けます。
3:42これは違いを見やすくするための準備で、今回の主役ではありません。
3:47主役は、このあとデモに追加する回転と基準点です。
3:51同じ箱、同じ回転で、基準点だけを変えたときの違いを比べていきましょう。
3:56エイチティーエムエルと土台ができたら、ファイルを保存して、ブラウザーで一度表示を確認してから次へ進みましょう。
4:05まず、基準点を左上にした場合です。
4:08デモに、ローテートで八度の回転を付け、トランスフォーム・オリジンにレフト・トップを指定します。
4:15すると、箱は左上の角を軸にして回ります。
4:19軸から遠い右下側ほど大きく位置が変わり、軸のある左上はほとんど動きません。
4:25ドアが蝶番を軸に開く様子に近い動きです。
4:28パネルが隅から開くような表現や、角を支点に倒れる動きを作りたいときは、このように端や角を基準点にすると、
4:33意図した動きに近づきます。
4:38次に、基準点の値だけをセンターに変えて比べてみます。
4:43回転の角度は同じ八度ですが、軸が箱の中心になるため、箱全体がその場で回るような見た目になります。
4:52左上を基準にしたときのような、片側へ倒れ込む動きはなくなります。
4:58基準点の違いは、回転だけでなく拡大でも現れます。
5:02スケールで要素を大きくすると、基準点を中心にして四方へ広がります。
5:08ホバーで少し拡大するカードなどは、中心を基準にしたほうが自然に見えることが多いです。
5:16変形の種類ごとに、どの基準点が合うか考えてみましょう。
5:21効かないときの確認方法です。
5:23このプロパティでいちばん多い勘違いは、トランスフォーム・オリジンだけを書いて、
5:28トランスフォーム本体がない状態です。
5:33変形自体がなければ、基準点を変えても見た目は一切変わりません。
5:39まず、ローテートなどの変形が付いているかを確かめてください。
5:44次に開発者ツールで順番に調べます。
5:47スタイルズで宣言に打ち消し線が付いていないか、コンピューテッドで最終的に採用された値は何か、
5:53セレクターとクラス名が一致しているかを確認します。
5:59一つずつ原因を切り分けるのが近道です。
6:03なお、指定したつもりでも、クラス名の綴りがエイチティーエムエルとシーエスエスでずれていると、
6:08宣言ごと適用されません。
6:13綴りの確認も忘れずに行いましょう。
6:16ブラウザー互換性を確認します。
6:18トランスフォーム・オリジンは、クローム三十六以降、エッジ十二以降、ファイアーフォックス十六以降、
6:23サファリ九以降と、主要なブラウザーで古くから使えます。
6:28この記事が参照しているエムディーエヌの互換性データでも、接頭辞なしの標準の指定が広くそろっています。
6:35日常の制作で、互換性を心配する必要はほとんどありません。
6:39ただし、プロパティが使えることと、すべての値や構文が同じように使えることは別です。
6:45三次元変形で奥行き方向の基準を指定するような応用では、対象ブラウザーで改めて確認してください。
6:51値の種類によって対応の時期が違うこともあり、このプロパティでもセンターという値自体は、
6:56さらに古いブラウザーから使えていた、というデータがあります。
7:01最後に練習とまとめです。
7:03まず、レフト・トップとセンターで、回転の見え方がどう違うかを自分の言葉で説明してみてください。
7:12次に、基準点の値を一つずつ変えて、結果がどう変わるかを比べてみましょう。
7:18一度に複数を変えるより、一つずつのほうが原因と結果を追いやすくなります。
7:24今日のポイントは、トランスフォーム・オリジンは変形の基準点であること、初期値は中心であること、
7:30変形本体とセットで使うこと、の三つです。
7:35次回は、いよいよトランスフォーム本体を取り上げ、移動や回転、拡大そのものの書き方を学びます。
7:43おつかれさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

transform-originの役割と主な指定値を解説。同じ回転でも左上を基準にするか中心を基準にするかで位置が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのtransform-originの使い方：指定値・実例・効かない原因とブラウザー互換性 →