CSS3旋轉父格但保留內容水平

Question

我有以下的HTML作爲，

<a href="#" class="outer"><span class="inner">Text</span></a> 

我想申請一個背景顏色，並在45度旋轉，它看起來像使用變換屬性的鑽石。但我希望文本保持水平但我不知道如何實現這一點。我曾嘗試過：

.outer{ 
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg); 
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); 
    transform: translateX(-50%) translateY(-50%) rotate(-45deg); 
    background-color:#fdc300; 
    width:70px; 
    height:70px; 
    position:relative; 
    display:inline-block; 
} 
.inner{ 
    color:#FFF; 
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
    transform: translateX(-50%) translateY(-50%) rotate(45deg); 
} 

和其他失敗的嘗試和無處可去。任何幫助，將不勝感激

Answer 1

您需要設置display: inline-block到span.inner：

.inner{ 
    display: inline-block; 
} 

DEMO

編輯：

要居中文本，你還需要：

.inner{ 
    position: relative; 
    left: 50%; 
    top: 50%; 
} 

DEMO2