Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- transform
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
transform
『transform』プロパティは『移動』、『拡大・縮小』、『回転』、『傾斜』などの変形を行うことができるプロパティです。
ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。
指定可能な値一覧
値 | 効果 |
---|---|
rotate(値) | 角度を指定して要素を回転させます。使用できる単位は『deg』のみです。 |
scale(値) | 要素を拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 |
skew(値) | 角度を指定して要素を傾斜変形させます。使用できる単位は『deg』のみです。 |
translate(値) | 移動距離を指定して要素を移動させます。使用できる単位は『px』のみです。 |
サンプルコード
transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg);
ブラウザでの表示結果
img { transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); }
『X軸』、『Y軸』、『Z軸』について
『X軸』、『Y軸』、『Z軸』は上記の画像のようになっており『拡大・縮小』、『傾斜』、『回転』、『移動』等をさせる際の軸として使用されます。
変形の基点となる位置は中心です。基点を変更したい場合は『transform-origin』を使用して下さい。
指定可能な値の一覧(回転)
値 | 効果 |
---|---|
rotate(回転角度) | 指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
rotateX(回転角度) | X軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
rotateY(回転角度) | Y軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
rotateZ(回転角度) | Z軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
ブラウザでの表示結果
img { transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); }
img { transform: rotateX(45deg); -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); -ms-transform: rotateX(45deg); }
img { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); }
img { transform: rotateZ(10deg); -webkit-transform: rotateZ(10deg); -moz-transform: rotateZ(10deg); -ms-transform: rotateZ(10deg); }
指定可能な値の一覧(拡大・縮小)
値 | 効果 |
---|---|
scale(数値, 数値) | 『scaleX』と『scaleY』をまとめて指定します。2個目の数値は省略することができますが、省略したときは最初に指定された値が指定されているものとして扱われます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 |
scaleX(数値) | 要素を『X方向』に拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 |
scaleY(数値) | 要素を『Y方向』に拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 |
scaleZ(数値) | 要素を『Z方向』に拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 |
scale3d(数値X, 数値Y, 数値Z) | 『scaleX』、『scaleY』、『scaleZ』をまとめて指定します。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 |
img { transform: scale(1.2, 0.8); -webkit-transform: scale(1.2, 0.8); -moz-transform: scale(1.2, 0.8); -ms-transform: scale(1.2, 0.8); }
img { transform: scaleX(0.8); -webkit-transform: scaleX(0.8); -moz-transform: scaleX(0.8); -ms-transform: scaleX(0.8); }
img { transform: scaleY(0.8); -webkit-transform: scaleY(0.8); -moz-transform: scaleY(0.8); -ms-transform: scaleY(0.8); }
img { transform: scaleZ(0.8); -webkit-transform: scaleZ(0.8); -moz-transform: scaleZ(0.8); -ms-transform: scaleZ(0.8); }
img { transform: scale3d(0.8, 1.2, 1.2); -webkit-transform: scale3d(0.8, 1.2, 1.2); -moz-transform: scale3d(0.8, 1.2, 1.2); -ms-transform: scale3d(0.8, 1.2, 1.2); }
指定可能な値の一覧(傾斜)
値 | 効果 |
---|---|
skew(傾斜角度, 傾斜角度) | 『skewX』と『skewY』をまとめて指定します。2個目の傾斜角度は省略することができますが、省略した際の値は『0』と指定されているものとして扱われます。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
skewX(傾斜角度) | X軸を軸として指定した角度に傾斜します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
skewY(傾斜角度) | Y軸を軸として指定した角度に傾斜します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 |
img { transform: skew(5deg, 10deg); -webkit-transform: skew(5deg, 10deg); -moz-transform: skew(5deg, 10deg); -ms-transform: skew(5deg, 10deg); }
img { transform: skewX(10deg); -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); -ms-transform: skewX(10deg); }
img { transform: skewY(10deg); -webkit-transform: skewY(10deg); -moz-transform: skewY(10deg); -ms-transform: skewY(10deg); }
指定可能な値の一覧(移動)
値 | 効果 |
---|---|
translate(数値X, 数値Y) | 『translateX』と『translateY』をまとめて指定します。2個目の数値は省略することができますが、省略した際の値は『0』と指定されているものとして扱われます。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。 |
translateX(数値) | 移動距離を指定して『X方向』に移動します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。 |
translateY(数値) | 移動距離を指定して『Y方向』に移動します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。 |
translateZ(数値) | 移動距離を指定して『Z方向』に移動します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。 |
translate3d(数値X, 数値Y, 数値Z) | 『translateX』『translateY』『translateZ』をまとめて指定します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。 |
img { transform: translate(10px, 20px); -webkit-transform: translate(10px, 20px); -moz-transform: translate(10px, 20px); -ms-transform: translate(10px, 20px); }
img { transform: translateX(30px); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); }
img { transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); }
img { transform: translateZ(20px); -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); -ms-transform: translateZ(20px); }
img { transform: translate3d(10px, 20px, 20px); -webkit-transform: translate3d(10px, 20px, 20px); -moz-transform: translate3d(10px, 20px, 20px); -ms-transform: translate3d(10px, 20px, 20px); }
対応ブラウザ
IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
---|---|---|---|---|---|---|---|---|---|
iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
---|---|---|
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
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円