旋转DIV不保留其DIV父级的边界半径

Question

问题简单：

我有父DIV的边界半径：10px应用于它。还有溢出：隐藏;

在里面，还有另一个DIV，它表现为一个从左到右穿过其父级的旋转条纹（宽度：120％）。

带Chrome的Prblem：条带内的旋转文字呈锯齿状。我应用以下CSS技巧来触发反锯齿：

-webkit-transform:rotate(-3deg) translate3d(0,0,0); /*avoid jagged edges in chrome */

这样可行，但作为副作用，条纹不再尊重父DIV的de border-radius。

为什么会这样？ 注意：必须在Chrome中测试以查看问题

http://jsfiddle.net/W89Me/

Answer 1

Réponse再次加上简单：

像这样申请-webkit-transform-style: preserve-3d;来解决问题

#parentdiv-xlz2 {
position: relative;
background-image: url("http://upload.wikimedia.org/wikipedia/commons/8/81/Sky_over_Washington_Monument.JPG");
background-size: contain;
padding-top: 0px;
height: 161px;
overflow: hidden;
border-radius: 15px;
-webkit-transform-style: preserve-3d;
}

出于性能原因，您可以向孩子添加backface-visibility

  -webkit-backface-visibility: hidden ;

和perspective:到父

  -webkit-perspective: 800; 

Demo

额外：这是基本的css3D结构。

MARKUP：

<div class=parent>
     <div class=preserve-3d>
           <div class=child>
                 lorem ipsum
           </div>
     </div>
</div>

型：

[class=parent]{-webkit-perspective: 800;}
[class=preserve-3d]{-webkit-transform-style: preserve-3d;}   
[class=child]{-webkit-backface-visibility: hidden ;}

也许（Ana Tudor）也会帮助你How Nesting 3D Transformed Elements Works

在Google Chrome Browser上进行测试