讓一個(gè)矩形在3D上進(jìn)行X軸旋轉(zhuǎn)叶撒，由于3D透視的關(guān)系牛柒，看上去就會(huì)變成一個(gè)梯形，所以可以利用之前平行四邊形的解決方案來(lái)實(shí)現(xiàn)梯形痊乾，因?yàn)?D變形無(wú)法通過(guò)內(nèi)部元素的反向變形來(lái)打到抵消的效果皮壁，所以不能使用嵌套元素解決方案，只能使用偽元素解決方案哪审。
#a:after{
transform: perspective(.5em) rotateX(3deg);
}
由于沒(méi)有設(shè)置transform-origin屬性蛾魄，應(yīng)用變形的偽元素會(huì)以他自身的中心線為軸進(jìn)行旋轉(zhuǎn)，這樣看上去湿滓，整個(gè)元素的寬度就增加了滴须，并且位置會(huì)稍微下移，高度會(huì)有少量縮減叽奥。
將偽元素的軸線設(shè)置為底邊可以解決前兩個(gè)問(wèn)題扔水。
transform-origin: bottom;
為了彌補(bǔ)元素在高度上的縮減，可以對(duì)偽元素的高進(jìn)行放大朝氓，具體放大的數(shù)值可以根據(jù)旋轉(zhuǎn)的角度進(jìn)行微調(diào)魔市。
transform:scaleY(1.4) perspective(.5em) rotateX(5deg);
這個(gè)技巧的最大優(yōu)點(diǎn)在于CSS樣式非常靈活主届，可以給偽元素添加背景，邊框待德，圓角君丁，投影等等屬性。并且只要把transform-origin屬性的值改為 bottom left或bottom right将宪，就可以生成左邊或右邊的直角梯形（注意對(duì)左右內(nèi)邊距進(jìn)行補(bǔ)正绘闷，讓文字在視覺(jué)效果上保持居中）。
#a{
box-sizing: border-box; // 保證增加內(nèi)邊距時(shí)盒子總大小不變
padding-right: 30px;
}
#a:after{
transform:scaleY(1.4) perspective(.5em) rotateX(5deg);
transform-origin: bottom left;
}
這一技巧可以很容易實(shí)現(xiàn)梯形樣式的標(biāo)簽较坛。
