首先建立外部結構

<div class="list"><a href="#" class=""><span>Aa</span></a></div>

.list {
	cursor: pointer;
	height: 125px;
	left: 300px;
	position: absolute;
	top: 300px;
	width: 125px;
	
	-ms-transform-origin: 0 100%; 		/* IE 9 */
	-webkit-transform-origin: 0 100%;	/* Safari 和 Chrome */
	-moz-transform-origin: 0 100%;		/* Firefox */
	-o-transform-origin: 0 100%;		/* Opera */
}
	.list a{
		background: #08c;
		border-radius: 250px;
		color: #99b977;
		float: left;
		font-size: 30px;
		height: 250px;
		left: -125px;
		position: absolute;
		text-align: center;
		text-decoration: none;
		top: 0;
		width: 250px;
	}
		.list a span{
			float: left;
			font-size: 30px;
			margin-top: 20px;
			text-align: center;
			width: 100%;
		}
 

這時候提醒大家一件事，旋轉的中心已經被調整為圓的中心

然後我們來試試skew屬性吧

skewX

.list{
	-ms-transform: skewX(30deg); 	  /* IE 9 */
	-moz-transform: skewX(30deg); 	  /* Firefox */
	-webkit-transform: skewX(30deg); /* Safari 和 Chrome */
	-o-transform: skewX(30deg); 	  /* Opera */
	transform: skewX(30deg); 	      /* Opera */
}

當然啦，為了能讓我們看清後面的圓。記得把list->a，用skewX(-30deg)轉回來。

那如果list的skewX是個負角度呢？

看懂了麼，正數為左，負數為右

skewY

.list{
	-ms-transform: skewY(30deg); 	  /* IE 9 */
	-moz-transform: skewY(30deg); 	  /* Firefox */
	-webkit-transform: skewY(30deg); /* Safari 和 Chrome */
	-o-transform: skewY(30deg); 	  /* Opera */
	transform: skewY(30deg); 	      /* Opera */
}

當然啦，為了能讓我們看清後面的圓。記得把list->a，用skewY(-30deg)轉回來。

那如果list的skewY是個負角度呢？

看懂了麼，正數為下，負數為上

好了，就這倆，收工，吃飯ヾ(◍°∇°◍)ﾉﾞ