論より証拠、まずは↓のデモを見てください。
カッコいいんですから!
因みにFireFoxでしか綺麗に見えません!!
大問題ですねぇ・・・ま、仕方ないですね。
とはいえ、あなたがバグフィックスしてもらっても構いませんよ~



どうですか?ファイアフォックスなら綺麗に見えたんじゃありませんか??
私の当初想定の仕様としては
・カメラのシャッターのように開閉すること
・開閉後にリンクジャンプ可能であること
・個別に開閉できること
・カッコいいこと
以上の4項目を狙って作成しました。
この中で個別に展開できること、だけは上手くいってません。
処理を4つ分一緒に動かしているので、内部プロセスがかち合って他のを起動すると他のタイマーを上書きして止まっちゃうんでしょうね。
簡単な解決法としては個別の処理に書き換えることですが、
私の美学が(後々ソース修正するときに4ヵ所全部なおすのが面倒なので)許しませんでした。
では、中身の解説に入りますね。

CSS

・任意のサイズに丸くします。そして、overflow:hiddenを指定します。
この初期想定はfirefoxでしか生きないことがわかりました。
・シャッター画像をシャッターの数だけクラスを作り当て込みます。
一つずつ背景画像を変えるのは地獄です。でも、私は二つ分作りました。
デザインするのも面倒でした。高額なソフトが使えれば楽になるでしょう。
何よりこのシャッター、360°÷12の30°毎に作ったつもりだったのですが、シャッターが11枚しかありません。
お粗末な話です。
・各シャッターパーツに回転原点と変化時のパラメータを与えます。今回は0.5s変化で線形に動くように設定してあります。

回転原点とか変化時のパラメータとか何のこと打にゃ。
みんな意味わからなくなるにゃ。
因みに補足すると
回転原点=transform-origin
変化時のパラメータ=transition: transform なにがし
ってことになるにゃ

おやおや、補足していただいてありがとうございます。
・各シャッターパーツに初期回転値を与え、position:absoluteによる位置を指定する。
とりあえずスタイルの説明はこんなもんで次はJavaScriptの話ですね。

JavaScript

・mouseenterしたときにhidden部分に隠れるように指定する。
私の場合、計算してfor文で連続的に回転値を与えるようにしています。
・mouseleaveしたときの挙動を指定する。このとき、すぐに処理が走らないようにdelay処理も加えておく。
※今回の場合、10カウント以上で処理が走ってシャッターが戻るようにしてあります。
count_gとなっていますが、カウントのタイマーIDを変えれると思ってこれを指定したのですが、残念ながら功を奏しませんでした。
バグフィックスは相当気が向かないとしませんので、先にも書きましたが皆さんよろしくお願いいたします。
・任意のfor文で蒸気処理を囲む
これに関しては割愛しますが、全部の処理を各個書いてもいいですのでね。
因みに、スマホやタブレットの処理分岐は抜いておきましたので、どんな失敗があるか確認してくださいね。
今日はこれで終わりにしますね。

Zzzz

関連記事

ブログを書くのがめんどくさい

今日は半自動でブログを書けるツールを作ってみましたよさえにゃー。 ふにゃ・?ご主人はずぼらでし

記事を読む»

桃5月の工程てっか~摘果~はまだです。藤の花さよなら。

本日は藤の花を剪定致しました。もう、この時期になると藤の花の素敵な見栄えは終わりで剪定しないとな

記事を読む»

桃の摘果

今週は桃の摘果ですよ。 初心者には非常に難しい作業です。 因みに摘果→本摘果と摘果は2回あり

記事を読む»