この投稿の個別ページを開いて、記事の下にある画像あるいはヘッダー画像の上にマウスを乗せると、
各々の画像が回転する。但し、ＩＥ（インターネット・エクスプローラ）では正常に働かない。
このソースは、「 HTMLとCSSで基礎から学ぶJavaScript」（園田 誠 著、秀和システム出版）に
書かれていたものを書き写して作成し、WordPressの「カスタムフィールド」の値として写し込んだ。
投稿画面の「HTML」ウインドーに中に写し込んでも、単にソースの文字が表示されるだけだった。
- I_Rot: <!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>New画像ビューワー</title>
<style>
/* この部分は画像を初めから90度回転*/
img#img_a{
/*CSSの記述*/
transitiont:ransform 0.5s linear;
/*ここから下はブラウザ固有の設定*/
-webkit-transition:-webkit-transform 5s linear 0s;/*Chrome Safari */
-moz-transition:-moz-transform 5s linear 0s ; /*Firefox*/
-o-transition:-o-transform 5s linear 0s;/*Opera*/
/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);*/
}
/* 次は、マウスが乗ったら画像が回転（IE用記述なし）。この動作には上の記述も必要*/
img#img_a:hover{
/*CSSの記述*/
transform:rotate(360deg);
/*ここから下はブラウザ固有の設定*/
-webkit-transform:rotate(720deg);/*Chrome Safari */
-moz-transform:rotate(720deg); /*Firefox*/
-o-transform:rotate(720deg);/*Opera*/
}
</style>
</head>
<body>
<h1> img:Hoverのテスト </h1>
<div>
<p id="cont">画像にマウスを乗せると回転します</p>
<img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2011/07/くちなし1.jpg" width="200" id="img_a">
</div>
</body>
</html>
2012年5月15日 7:54 AM |
カテゴリー：習作HTML5 |
コメント（0）
