Question

我试图使用一些CSS3代码来旋转我的文字，但我认为它没有被识别？

CSS代码：

.menu {
    background-image:url('button.jpg');
    cursor: pointer;
    width: 61px;
    height: 205px;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
}

HTML code：

<div id="menu-box">
    <a class="menu" href="#" >HOME</a>
    <a class="menu" href="#" >MYSELF</a>
    <a class="menu" href="#" >PORTFOLIO</a>
    <a class="menu" href="#" >CONTACT ME</a>        
</div>

我不确定问题是什么。我错过了什么？

Answer 1

您无法转换内联元素;将.menu的显示值更改为内联块。

简化示例：http://jsfiddle.net/vg73f/

Answer 2

<a>类适用的.menu代码是inline个元素。它们需要是block级元素才能应用转换。

通过添加display: block;，我们可以看到转换正确应用。

http://jsfiddle.net/RvrBM/

或者，您可以使用display: inline-block;来允许元素旋转，但保持内联排列。

http://jsfiddle.net/g5BRT/

此外，正如Pavlo在上面的评论中所指出的那样，您在代码中缺少未加前缀的转换。它应该是这样的：

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

我的CSS3在我的html页面中不起作用

2 个答案: