CSSのscaleに負の値を入力して、水平・垂直反転させる

demo

scaleの使い方

scaleX(数値)
scaleX()関数では、X方向の縮尺比率を指定します。Y方向とZ方向の比率は1となります。[sx,1,1]

・参考
transform:scale()－CSS3リファレンス

負の値を入れる

-webkit-transform:scaleX(-1);

こうすることでX軸方向に-1倍されます。変形後はy軸対称の位置になるので、水平反転させたことになります。

-webkit-transform:scaleX(-1);

同様にして、垂直反転もできます。

rotateして、transformさせるよりも簡単だと思いました。

SCSSでkeyframesの書き方がよくわからない・・・

keyframesのベンダープレフィックスを書くのが面倒だったので、SCSSで関数化したかったです。

こんなgistページを見ながら一度書いてみましたが、改変を重ねるうちにうまく動かなくなりました。
https://gist.github.com/ericam/1607696

@#{$prefix}keyframes{

}

上のように書きたいのですが、最初の「@」がSCSSの「@」と混同しまい、うまく認識されないのではと思いました。今回は早く完成させたかったので、ごりごりコピペで書きました。ああめんどくさい・・・。