js旋转V字俄罗斯方块

实现效果如图，也就是一个图像的旋转。注意，旋转后的文字是相对应的，而且文字还是立起的。第一次点击时显示，第二次点击时开始旋转。下面是我做这个效果的记录，方法这么差，我也就不说什么了。

js旋转V字俄罗斯方块

先上HTML/CSS部分，这部分都是相同的。JS放在 script 标签里。

<!--
Author: XiaoWen
Create a file: 2016-12-04 17:03:21
Last modified: 2016-12-05 17:34:58
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>V字方块</title>
  <style>
    body{
      padding: 100px;
    }
    ul,li{
      margin: 0;
      padding: 0;
      list-style:none;
      width:500px;
      height:500px;
      background: #ccc;
    }
    ul{
      position: relative;
    }
    li{
      width: 100px;
      height: 100px;
      background: #f00;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 16px;
      font-weight:bold;
      position:absolute;
      display:none;
    }
  </style>
</head>
<body>
<button>旋转</button>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
//这里的 js 代码分次放在下面的文章里。
</script>
</body>
</html>

HTML/CSS