このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.11.20

CSS3 transformプロパティ scale() で要素を拡大、縮小

transformプロパティのscale()は、要素を拡大、または、縮小表示する時に使用します。

値としてはscaleX()、scaleY()、scaleZ()、scale3d()等があります。

scale(数値, 数値) : 2つの数値で2D縮尺比率を指定します。1つ目の数値はX方向、2つ目の数値はY方向の比率となります。2つ目の数値は省略することができます。(1つめの数値となる。)[x値、y値]

scaleX(数値) : X方向の縮尺比率を指定。Y方向とZ方向の比率は1となる。[x値,1,1]

scaleY(数値) : Y方向の縮尺比率を指定。X方向とZ方向の比率は1となる。[1,y値,1]

scaleZ(数値) : Z方向の縮尺比率を指定。X方向とY方向の比率は1となる。[1,1,z値]

scale3d(数値, 数値, 数値) : 3つの数値で3D縮尺比率を指定。 1つ目の数値はX方向、2つ目の数値はY方向、3つ目の数値はZ方向の比率となる。[x値,y値,z値]

scale(数値, 数値)

[code]-moz-transform: scale(0.4);
-webkit-transform: scale(0.4);[/code]

デモページ

scaleX(数値)

[code]-moz-transform: scaleX(0.4);
-webkit-transform: scaleX(0.4);[/code]

デモページ

scaleY(数値)

[code]-moz-transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);[/code]

デモページ

scaleZ(数値)

[code]-moz-transform: scaleZ(0.4);
-webkit-transform: scaleZ(0.4);[/code]

デモページ

scale3d(数値, 数値, 数値)

[code]-moz-transform: scale3d(0.4,0.4,0.4);
-webkit-transform: scale3d(0.4,0.4,0.4);[/code]

デモページ

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。