Question

<div class="navbar-wrapper">
    <div id="navbar" class="navbar">
        <ul>
            <li><a id="unskew" href="">Home</a></li>
            <li><a id="unskew" href="">Prices</a></li>
            <li><a id="unskew" href="">About Me</a></li>
            <li><a id="unskew" href="">Contact</a></li>
        </ul>
    </div>
</div>`

我试图使用负偏斜来整理文本，但即使我只使用负偏斜本身也不做任何事情，它只是没有改变。

#unskew
{
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
}

ul li  
{
    transform: skew(10deg);
}

Answer 1

CSS Transforms Module Level 1

可转换元素是一个元素，其布局由CSS框模型控制，该模型是块级或atomic inline-level element，或者其显示属性计算为表行，表行组，表格 - header-group，table-footer-group，table-cell或table-caption。

默认情况下，锚元素为inline，因此不会应用偏斜变换。

您可以将锚元素的display更改为inline-block。这样做，将应用偏斜变换。

Example Here

#unskew {
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
    display: inline-block;
}

旁注：

作为Jonathon points out in the comments，你应该使用类而不是id，因为id必须是唯一的，不应该重复..

应用负偏斜对内部HTML没有影响

1 个答案: