9.1.5　固定角度旋转

Font Awesome提供了一组样式，用于旋转特定的图标，从而达到“一种图标六种用法”的目的，其样式和旋转角度如表9-1所示。

9.1.5　固定角度旋转 - 图1

旋转的用法如下：

  1. <i class="icon-shield"></i>  正常<br>
  2. <i class="icon-shield icon-rotate-90"></i>  旋转90度<br>
  3. <i class="icon-shield icon-rotate-180"></i>  旋转180度<br>
  4. <i class="icon-shield icon-rotate-270"></i>  旋转270度<br>
  5. <i class="icon-shield icon-flip-horizontal"></i>  水平翻转<br>
  6. <i class="icon-shield icon-flip-vertical"></i>  垂直翻转

上述示例的运行效果如图9-5所示。

9.1.5　固定角度旋转 - 图2 图9-5　旋转效果

上述5个旋转样式的实现原理是基于CSS3的transform特性实现的。源码如下：

  1. // 源码316行
  2. /* Icon rotations and mirroring */
  3. .icon-rotate-90:before { /* 旋转90度 */
  4.     -webkit-transform: rotate(90deg);
  5.     -moz-transform: rotate(90deg);
  6.     -ms-transform: rotate(90deg);
  7.     -o-transform: rotate(90deg);
  8.     transform: rotate(90deg);
  9.     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  10. }
  11. .icon-rotate-180:before { /* 旋转180度 */
  12.     -webkit-transform: rotate(180deg);
  13.     -moz-transform: rotate(180deg);
  14.     -ms-transform: rotate(180deg);
  15.     -o-transform: rotate(180deg);
  16.     transform: rotate(180deg);
  17.     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  18. }
  19. .icon-rotate-270:before { /* 旋转270度 */
  20.     -webkit-transform: rotate(270deg);
  21.     -moz-transform: rotate(270deg);
  22.     -ms-transform: rotate(270deg);
  23.     -o-transform: rotate(270deg);
  24.     transform: rotate(270deg);
  25.     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  26. }
  27. .icon-flip-horizontal:before { /* 水平翻转 */
  28.     -webkit-transform: scale(-1, 1);
  29.     -moz-transform: scale(-1, 1);
  30.     -ms-transform: scale(-1, 1);
  31.     -o-transform: scale(-1, 1);
  32.     transform: scale(-1, 1);
  33. }
  34. .icon-flip-vertical:before { /* 垂直翻转 */
  35.     -webkit-transform: scale(1, -1);
  36.     -moz-transform: scale(1, -1);
  37.     -ms-transform: scale(1, -1);
  38.     -o-transform: scale(1, -1);
  39.     transform: scale(1, -1);
  40. }

如果大家需要，也可以根据自身情况定义任意角度的旋转样式。

注意

由于使用了CSS3的特性，所以该旋转功能不支持IE7及以下版本。