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