transform:rotateを使って要素を回転

CSSだけで要素を回転させるにはtransform:rotate()を使う。

transitionと複合的に使うとhover時に3D的にクルクル回るカードの様なアイコンを作る事もできる。

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/RRpBxK/'>RRpBxK</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.

sample

時計回りに回転

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/jrBpLK/'>jrBpLK</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.

/*マイナス値を指定で反時計回り*/

X軸を起点に反転(上下に回転)

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/XKMBaw/'>XKMBaw</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.

Y軸を起点に反転（左右に回転）

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/qNryPd/'>qNryPd</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.

3Dに回転

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/xOqJPx/'>xOqJPx</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.

/*rotate3d(x,y,z,回転角度); ／ x,y,zは0〜1.0の間*/

HTML5 & CSS3の知識