CSS writing-mode与兼容的图标旋转效果实例页面

展示

代码

• HTML：

  <p><strong>默认流</strong></p>
  <span class="icon-play">r</span> 箭头朝右
  
  <p><strong>垂直流</strong></p>
  <span class="icon-play verticle-mode">r</span> 箭头朝下

• CSS：

  @font-face {
      font-family: Arrow;
      src: url("arrow.eot?");
      src: local("Any"),
           url("arrow.woff") format("woff"),
           url("arrow.ttf");
      font-weight: normal;
      font-style: normal;
  }
  
  .icon-play {
      font-family: Arrow;
  }
  
  .verticle-mode {
      writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;      
      writing-mode: vertical-rl;
  }