旋轉和扭曲變形的文字

Question

我試圖安裝使用rotate和skewtransform的結構，但裏面所有的文字也越來越變形，check the demo here

.inclined .content{ 
    -moz-transform: rotate(-15deg) skewX(-15deg); 
    -webkit-transform: rotate(-15deg) skewX(-15deg); 
    -o-transform: rotate(-15deg) skewX(-15deg); 
    -ms-transform: rotate(-15deg) skewX(-15deg); 
    transform: rotate(-15deg) skewX(-15deg); 
} 

.inclined{ 
    -moz-transform: rotate(15deg) skewX(15deg); 
    -webkit-transform: rotate(15deg) skewX(15deg); 
    -o-transform: rotate(15deg) skewX(15deg); 
    -ms-transform: rotate(15deg) skewX(15deg); 
    transform: rotate(15deg) skewX(15deg); 
    background: #515151; 
    padding: 20px; 
    text-align: center; 
    color: #fff; 
    margin-top: 115px; 
} 

有沒有什麼辦法解決這一問題？

Answer 1

要獲得逆變換，你需要改變的標誌和個人的順序變換

.inclined .content{ 
    -moz-transform: skewX(-15deg) rotate(-15deg) ; 
    -webkit-transform: skewX(-15deg) rotate(-15deg); 
    -o-transform: skewX(-15deg) rotate(-15deg); 
    -ms-transform: skewX(-15deg) rotate(-15deg); 
    transform: skewX(-15deg) rotate(-15deg) ; 
} 
.inclined{ 
    -moz-transform: rotate(15deg) skewX(15deg); 
    -webkit-transform: rotate(15deg) skewX(15deg); 
    -o-transform: rotate(15deg) skewX(15deg); 
    -ms-transform: rotate(15deg) skewX(15deg); 
    transform: rotate(15deg) skewX(15deg); 
    background: #515151; 
    padding: 20px; 
    text-align: center; 
    color: #fff; 
    margin-top: 115px; 
} 

fiddle