css3实现文字卡片折叠效果

效果图

静态效果图

鼠标悬浮到标签上的效果

完整实现代码

	
		
		
		
		
	
	
		

			W
			H
			A
			T
			F
			U
		
	

总结

实现此折叠效果 主要使用了CSS3的 transform 属性 ：
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。