Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 transform 要素を変形させる part1

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


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


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

やり方は、

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

こんな感じです。(※「webkit」などのベンダープレフィックスは適宜つけてください。)
第1引数はX方向の比率第2引数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」と同じです。
第1引数はX方向の距離第2引数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>

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



「transform には、他にも機能があります。しかし、長くなったので、続きは次回に書きます。


参考サイト
transform-CSS3リファレンス

広告を非表示にする