CSS3 transform 要素を変形させる　part1

今回は、CSS3の「transform」について書きます。

「transform」を使うと、要素を拡大,回転,移動など色々変形させる事ができます。

まず、はじめに「拡大・縮小」から書いていきます。

やり方は、

-webkit-transform:scale(2.6,2);

こんな感じです。（※「webkit」などのベンダープレフィックスは適宜つけてください。）
第１引数はX方向の比率、第２引数Y方向の比率です。

scale(X方向の比率,Y方向の比率)

実際のプログラムで、使うとこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 400px;
	 	height: 200px;
	 	background-color: red;
	 	-webkit-transform:scale(2.6,2); 
	 }
	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>

実行結果
f:id:gupuru:20140317152439p:plain
※赤色は、「width: 400px;height: 200px;」の大きさです。青色が拡大させたものです。大きさの比較のために上のプログラムとは、少し違います。

また、

-webkit-transform:scaleX(2);

こういう書き方もできます。
こちらは、X方向だけ指定するものです。

Yの場合は、

-webkit-transform:scaleY(2.8);

こうです。

あと、Z方向もできます。

-webkit-transform:scaleZ(0.8);

さらに、X,Y,Zすべて指定したい場合は、こうします。

-webkit-transform:scale3d(0.5,0.5,0.5);

「scale3d」に関して、こちらのサイトでデモが公開されています↓
3D CSS Transforms: scale3d()
興味がある方は、ぜひ見てください！

次に、「移動」について書きます。

書き方は、コレです。

	-webkit-transform:translate(20px,50px);

基本的な所は、「scale」と同じです。
第１引数はX方向の距離、第２引数Y方向の距離です。
もちろん、X方向だけ指定することもできます。

-webkit-transform:translateX(20px);

Y方向だけの指定方法は、

-webkit-transform:translateY(20px);

こうです。

実際のプログラムは、こんなかんじです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 400px;
	 	height: 200px;
	 	background-color: red;
	 	-webkit-transform:translateX(20px); 
	 }
	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>