css 的 2D变形（transform）:translate、scale、rotate、skew实现“折叠”界面

先看效果图：

html代码部分：

  
平移属性：translate()、translateX()、translateY()
  
旋转属性：rotate()、rotateX()、rotateY()
  
缩放属性：scale()、scaleX()、scaleY()
  
倾斜属性：skew()、skewX()、skewY()

完整css代码部分：

.rules{
  list-style:none;
  counter-reset:ruleCount 2;  //方便标注序号
  width:500px;
  margin:100px auto;
  font-size:14px;
}
.rules li{
  height:50px;
  line-height:50px;
  padding:0 10px;
  counter-increment:ruleCount;
  position:relative;
}
.rules li:before{
  content:'&' counter(ruleCount);
  position:absolute;
  transform-origin:100% 100%;
  width:50px;
  box-sizing:border-box;
  text-align:center;
  transform:translate(-100%,-100%) rotate(-90deg);
  background-color:#ddd;
  font-weight:bold;
  border:1px solid #777;
}
.rules li:nth-child(odd){
  background-color:#666;
  transform:skewX(15deg);
}
.rules li:nth-child(even){
  background-color:#999;
  transform:skewX(-15deg);
}

说明：

list-style:none;去掉列表的默认样式（去掉编号）。

counter-reset:ruleCount 2;告诉浏览器当前元素的计数器已重置为ruleCount(名字任意取即可)，为了告诉计数器的初始值是多少。

 counter-increment:ruleCount;递增列表的每一项，如：第一项对应的计数器值是3，那第二项就应该是4，以此类推。

content:'&' counter(ruleCount);给列表的每一项添加序号（序号前加了特殊字符&）。

position:relative;为了给序号设置定位，不占据页面的空间，所以给li设置一个相对定位。这样在伪类before中就可以给序号添加绝对定位。定位后序号默认就位于每一项的左上角。

transform-origin:100% 100%;给位于左上角的序号设置旋转的中心点为序号的右下角。

transform:translate(-100%,-100%) rotate(-90deg);让序号先向左和向上移动序号元素自身的宽高值大小，再逆时针旋转90度。

transform:skewX(15deg);让奇数项元素整体在X轴上偏移15度；（折叠效果的关键代码）

transform:skewX(-15deg);让奇数项元素整体在X轴上偏移-15度；（折叠效果的关键代码）

 

缩放功能：

以上是在2D变换效果中能用到的一些属性。

.scale-box{
  text-align:center; 
}

效果如下：

如果我们只对X轴进行缩放0.5（缩小一倍）看看是什么效果：

.scale-box{
  transform:scaleX(0.5);
}

字体被拉长了，形如被挤压。

下面我们来添加X轴和Y轴同时进行缩放属性：

.scale-box{
  transform:scale(2);
  /** 等同于transform:scale(2,2) **/
  /** 等同于transform:scaleX(2) scaleY(2) **/
}

效果如下：

字体整体都被放大了2倍。