戻るホーム次へ

rotateX() メソッド

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

rotateY() メソッド

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


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