CSS3:hover時のアニメーション
テキストp295~ transform:完成版にリンク
★transition / transform / translate の使い方に気をつける
<!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>