Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

CSS3:hover時のアニメーション

テキストp295~ transform:完成版にリンク

★transition / transform / translate の使い方に気をつける
f:id:sankoblog:20160404000451p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>テキストp295~  transform</title>
<style>
div {
	width: 200px;
	height: 200px;
}
p {
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
}
/*--------------------------*/
.trans01 {
	background: #CCC;
	transition: 1.5s;
}
.trans01:hover {
	/*translate(  X軸方向の距離,  Y軸方向の距離  );*/
	transform: translate(100px,0);
}
/*--------------------------*/
.trans02 {
	background: #9CC;
	transition: 1s;
}
.trans02:hover {
	/*rotate( 角度deg  );*/
	transform: rotate(360deg);
}
/*--------------------------*/
.trans03 {
	background: #FC9;
	transition: 1s;
}
.trans03:hover {
	/*scale(  X軸方向の距離,  Y軸方向の距離  );*/
	transform: scale(1.5,1.5);
}
</style>
</head>

<body>
<div class="trans01"><p>右へ移動</p></div>
<div class="trans02"><p>回転</p></div>
<div class="trans03"><p>拡大・縮小</p></div>
</body>
</html>