戻るホーム次へ

translate() メソッド

これは DIV 要素です。
これは DIV 要素です。





<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'>
<style> 
div.trans{
	width:100px;
	height:75px;
	background-color:#3399FF;
	border:1px solid #0066FF;
}
#trans2{
	-ms-transform:translate(50px,100px);     /* IE 9 */
	-webkit-transform:translate(50px,100px); /* Chrome, Safari, Opera */
	transform:translate(50px,100px);         /* Standard syntax */
}
</style>
</head>
<body>
<h3>translate() メソッド</h3>
<div class="trans">これは DIV 要素です。</div>
<div id="trans1" class="trans">これは DIV 要素です。</div>
<br><br><br><br><br>
</body>
</html>

rotate() メソッド

これは DIV 要素です。
これは DIV 要素です。


<!DOCTYPE html>
<html>
<head>
<style> 
div.rotate{
	width:100px;
	height:75px;
	background-color:#3399FF;
	border:1px solid #0066FF;
	color:#FFFFFF;
}
#rotate2{
	-ms-transform:rotate(30deg);     /* IE 9 */
	-webkit-transform:rotate(30deg); /* Chrome, Safari, Opera */
	transform:rotate(30deg);         /* Standard syntax */
}
</style>
</head>
<body>
<h3>rotate() メソッド</h3>
<div class="rotate">これは DIV 要素です。</div>
<div id="rotate1" class="rotate">これは DIV 要素です。</div>
<br><br>
</body>
</html>

scale() メソッド

これは DIV 要素です。
これは DIV 要素です。


<!DOCTYPE html>
<html>
<head>
<style> 
div.scale{
	width:100px;
	height:75px;
	background-color:#3399FF;
	border:1px solid #0066FF;
	color:#FFFFFF;
}
#scale1{
	margin:100px;
	-ms-transform:scale(2,4);     /* IE 9 */
	-webkit-transform:scale(2,4); /* Chrome, Safari, Opera */
	transform:scale(2,4);         /* Standard syntax */
}
</style>
</head>
<body>
<h3>scale() メソッド</h3>
<div class="scale">これは DIV 要素です。</div>
<div id="scale1" class="scale">これは DIV 要素です。</div>
<br><br>
</body>
</html>

skew() メソッド

これは DIV 要素です。
これは DIV 要素です。


<!DOCTYPE html>
<html>
<head>
<style> 
div.skew{
	width:100px;
	height:75px;
	background-color:#3399FF;
	border:1px solid #0066FF;
	color:#FFFFFF;
	margin-left:20px;
}
#skew1{
	-ms-transform:skew(30deg,20deg);     /* IE 9 */
	-webkit-transform:skew(30deg,20deg); /* Chrome, Safari, Opera */
	transform:skew(30deg,20deg);         /* Standard syntax */
}
</style>
</head>
<body>
<h3>skew() メソッド</h3>
<div class="skew">これは DIV 要素です。</div>
<div id="skew1" class="skew">これは DIV 要素です。</div>
<br><br>
</body>
</html>

matrix() メソッド

これは DIV 要素です。
これは DIV 要素です。


<!DOCTYPE html>
<html>
<head>
<style> 
div.matrix{
	width:100px;
	height:75px;
	background-color:#3399FF;
	border:1px solid #0066FF;
	color:#FFFFFF;
	margin-left:20px;
}
#matrix1{
	-ms-transform:matrix(30deg,20deg);     /* IE 9 */
	-webkit-transform:matrix(30deg,20deg); /* Chrome, Safari, Opera */
	transform:matrix(30deg,20deg);         /* Standard syntax */
}
</style>
</head>
<body>
<h3>matrix() メソッド</h3>
<div class="matrix">これは DIV 要素です。</div>
<div id="matrix1" class="matrix">これは DIV 要素です。</div>
<br><br>
</body>
</html>