添加变换：仅倾斜到容器，而不是

中的文本是否有方法转换元素，但不转换该元素中的文本？添加变换：仅倾斜到容器，而不是

body { 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 100px; 
    font-size: 13px; 
} 

div { 
    background: #fff; 
    margin: 0 auto; 
    width: 200px; 
    padding: 100px; 
    text-align: center; 
    /* border-radius */ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    /* box-shadow */ 
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; 
    -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; 
    box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
}

（代码 - http://cssdesk.com/H7Awc）

我有几种方法，包括加入之前伪类给它，这在理论上，但工程我加入这个导航到WordPress站点和一个的罐头”有位置：绝对。下面是使用前伪代码这是我需要它来寻找，但没有绝对

http://cssdesk.com/ALRrQ

任何帮助，将不胜感激，谢谢。

来源

2014-07-17 RachJenn

正如我所看到的，您尝试通过将skew(20deg)添加到该范围来重置文本的倾斜度。但transform不适用于内联元素，因为跨度是。

解决方案

span { 
    display:inline-block; /*important line*/ 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
}

见Fiddle

来源

2014-07-17 15:17:20 SVSchmidt

感谢这么多的！我的工作非常棒。但是现在这种扭曲影响了产品的下降。如果我删除歪斜，它可以正常工作。你能帮我吗？ http://www.fi-testing.co.uk/birchfield/ – RachJenn

为转换内容创建一个额外的规则：'nav.top-bar＃menu-topmenu> li.menu-item'。这应该起作用，因为>只会影响顶层菜单的直接子项。 – SVSchmidt

添加变换：仅倾斜到容器，而不是

回答

相关问题