どうも！chuckです。
タイトルの通り。CSS3の勉強がてら、回転するフォトギャラリーを作りましたのでお披露目ヽ(=´▽`=)ﾉ
完成品
まずは完成品を。こちらになります。
http://chuck0523.github.io/front-end-coding/rotateToSpread/rotateToSpread6.html
スクロールに応じて回転します。
また、マウスオーバーで写真が目立ちます。
スマホ対応
申し訳程度のスマホ対応もしています。って言っても画像サイズを縮小しただけですが(ヽ´ω`)
技術的な話
CSS的にはtransformのお世話になりました。
transform : rotateZ(xxxdeg); (画像の回転)
transform-origin : 30px 150px; (回転の軸の位置)
また、スクロールはお得意のjQueryで。スクロールした量を回転角度に充てています。
課題とか
transform-originの扱いにまだ慣れていないかなあ。スマホ版でも回転軸の位置を変えませんでした。なので、画面の小ささに対して画像の回転領域が広すぎますねヽ(´Д`；)ﾉ
この回転軸をjQueryでゴリゴリ動かせたら表現の幅がぐっと広がりそう…！
コードなど
参考にしたサイト様
