CSS3 旋转父级 div 但保持内容水平

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

CSS3 旋转父级 div 但保持内容水平

CSS3 rotate parent div but keep content horizontal

css

rotation