使用CSS-webkit转换时，Chrome上的文本模糊

我正在使用

-webkit-transform: skew(-15deg, 0deg);

使div倾斜，然后

-webkit-transform: skew(15deg, 0deg);

要取消对包含子对象的文本的查看，请执行以下操作。在谷歌chrome中，歪斜看起来很难看，而且是像素化的，所以我使用

-webkit-backface-visibility: hidden;

让它看起来不错。现在，容器倾斜得很好，内部文本“不倾斜”，但文本本身模糊难看！（问题只存在于使用-webkit的chrome中）

有没有办法把课文再弄清楚

HTML

<div class="mainBodyItemBox">
    <div class="mainBodyItemImage">
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg">
    </div>
    <div class="mainBodyItemDecorator"></div>
    <div class="mainBodyItemText">PEC Zwolle v FC Groningen Tickets
        <br> <span class="mainBodyItemType">Football</span>
 <span class="mainBodyItemTime"><strong>04 Apr 2014</strong> | 21:00</span>
    </div>
</div>

<article>
    <section>
        <h1>PEC Zwolle v FC Groningen Tickets</h1>
        <p>Football</p>
        <time><strong>04 Apr 2014</strong> | 21:00</time>
    </section>
    <aside>
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg" /><b></b>
    </aside>
</article>

---

我不确定这将是一个可行的解决方案，修复模糊的文本，但我创造了一些似乎可以避免这个问题

我使用的技巧是将所有需要变换：skew（-10deg，0deg）的元素封装在一个容器中，并将容器绝对放置在文本后面。这样，文本不受任何转换的影响，因此不需要进行反求。我确实尝试过以不同的方式分离文本，但仅仅是靠近转换后的元素仍然会导致文本模糊

我已经创建了两个演示，保留了您原来的HTML，并使用了一些更干净、更具语义的东西。正是后者，我还包括了下面的代码

HTML

<div class="mainBodyItemBox">
    <div class="mainBodyItemImage">
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg">
    </div>
    <div class="mainBodyItemDecorator"></div>
    <div class="mainBodyItemText">PEC Zwolle v FC Groningen Tickets
        <br> <span class="mainBodyItemType">Football</span>
 <span class="mainBodyItemTime"><strong>04 Apr 2014</strong> | 21:00</span>
    </div>
</div>

<article>
    <section>
        <h1>PEC Zwolle v FC Groningen Tickets</h1>
        <p>Football</p>
        <time><strong>04 Apr 2014</strong> | 21:00</time>
    </section>
    <aside>
        <img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/2012_Olympic_Football_-_Men's_tournament_-_Honduras_Vs_Morocco.jpg" /><b></b>
    </aside>
</article>

---

这是我基于您的简单版本：

具有自动宽度！：）

HTML:

---

在Chrome33上我看起来不错。您使用的是哪个版本的Chrome？另外，您可以为问题添加更多代码来演示问题吗？请参见此处：添加后-webkit backface visibility:hidden；模糊出现了！好吧，我想我看不出你在歪曲什么。在我的小演示中，由于没有明显的模糊性，我不需要在父屏幕上显示

背面可见性

。您还可以将

-webkit backface visibility:hidden

添加到文本中以删除像素。这是原始的像素化扭曲：在

-webkit backface visibility:hidden之后：（嘿，有什么新消息吗？
  <article>
    <section>
        <p>Football</p>
    </section>
    <aside>
    </aside>
</article>
<article>
    <section>
        <p>Football Player</p>
    </section>
    <aside>
    </aside>
</article>

article, aside {
    font-size: 12px;
    height: 30px;
    width:auto;
}

article {
    display: inline-block;
    font-family: Arial;
    position:relative;
    margin-left: 25px;
    margin-top: 10px;
}
aside {
width:100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
border-width: 4px;
border-color: red;
background-color: #f5f5f5;
border: 3px solid #04B552;
border-radius: 3px;
/* border-bottom: 1px solid #c9c9c9; */
transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
-moz-transform: skew(-10deg, 0deg);
-o-transform: skew(-10deg, 0deg);
-ms-transform: skew(-10deg, 0deg);
-webkit-backface-visibility: hidden;
}

section {
    color: #323d50;
    height: 30px;
    margin-left:0px;
    display: block;
}
section p {
    font-family:'lato';
    font-size:15px;
    line-height:15px;
    font-weight:normal;
    margin:10px 15px;
}

time {
    font-size: 12px;
}