Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- transform-origin
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
transform-origin
『transform-origin』プロパティは『transform』で『回転』や『移動』等の変形するときの基点となる位置を指定できます。
ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。
サンプルコード
transform-origin:top left; -webkit-transform-origin:top left; -moz-transform-origin:top left; -ms-transform-origin:top left;
ブラウザでの表示結果
img {
transform-origin:top left;
-webkit-transform-origin:top left;
-moz-transform-origin:top left;
-ms-transform-origin:top left;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
対応ブラウザ
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
|---|---|---|---|---|---|---|---|---|---|
| iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
|---|---|---|
概要
『transform-origin』プロパティは『transform』で『回転』や『移動』等の変形するときの基点となる位置を指定できます。
指定できる値は『キーワード』または数値で、数値で指定する際の単位は『%』や『px』等が使用できます。数値で指定する際の基準となる位置は左上です。『transform-origin』の初期値は『垂直方向の位置』、『水平方向の位置』共に『center』(50% 50%)となります。
『垂直方向の位置』で指定できるキーワードは『top』、『center』、『bottom』となり、『水平方向の位置』で指定できるキーワードは『left』、『center』、『right』となります。
img {
transform-origin:top left;
-webkit-transform-origin:top left;
-moz-transform-origin:top left;
-ms-transform-origin:top left;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
『%』を使用した数値で指定する際の『垂直方向の位置』の『0%』は『top』、『100%』は『bottom』、『水平方向の位置』の『0%』は『left』、『100%』は『right』を指定している事と同じになります。
img {
transform-origin: 20% 30%;
-webkit-transform-origin: 20% 30%;
-moz-transform-origin: 20% 30%;
-ms-transform-origin: 20% 30%;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
『px』を使用した数値で指定する際に値が両方共に『0px』の場合は『top left』と指定している事と同じになります。
img {
transform-origin: 20px 30px;
-webkit-transform-origin: 20px 30px;
-moz-transform-origin: 20px 30px;
-ms-transform-origin: 20px 30px;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円