カテゴリー:
アニメーション
閲覧数:618 配信日:2015-01-08 09:32
やりたいこと
transform:rotate初期値を設定したい
・マウスオーバーした際、transform:rotate初期値-180deg状態からスタート
・180degで終了
挑戦
色々実装してみるも
・全く意図通り動作しない
「transform:rotate」複数指定は不可
・scaleなど異なる値との併用は可能だが、「rotate」を「transform」に複数指定することは出来ない
失敗例
・適当にコーディングしても、動作するわけがない
transform:rotate(-180deg) scale(1.2) rotate(180deg);
・「:before」「:after」を勝手に組み合わせても、もちろん駄目
img:hover:before{
transform:rotate(-180deg);
}
img:hover:after{
transform:rotate(180deg);
}
解決するためには
・@keyframes理解が必要
ブラウザ実装状況
・keyframes