Question

我正在尝试实现卡片翻转效果，因此在“翻转”元素上使用backface-visibility: hidden;。这适用于Firefox和Chrome中的HTML元素，也适用于Firefox中的svg元素。但是，它不适用于使用Chrome的svg。
在Chrome中，即使将背面可见性设置为隐藏，180度“翻转”的svg元素仍然可见。
我也测试了是否使用transform-style: preserve-3d;，并且都使用了-webkit前缀

最小示例：

HTML：

  <svg>
    <g class="flip">
      <rect id="svg-box1" width="100" height="50"/>
      <text x="10px" y="20px">
        Flip svg
      </text>
    </g>
  </svg>

  <div class="flip">
    <div id="div-box1">
      <p>Flip div</p>
    </div>
  </div>

CSS：

svg {
  overflow: visible;
  height: 50px;
  width: 300px;
}

.flip div {
  height: 50px;
  width: 100px;
  background: orange;
}

.flip p {
  padding: 10px;
}

rect {
  fill: orange;
}

.flip {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

这里也是JSFiddle： https://jsfiddle.net/nf4me6bd/

背景：

我正在尝试使用CSS来实现卡片翻转效果。我发现了很多示例，我也可以使用基本版本。但是，我希望我的“卡”成为倾斜的盒子。当我仅将HTML元素与CSS一起使用时，框的内容非常模糊（由于框内容的转换倾斜和倾斜）。因此，我现在正在尝试使用svg元素。

系统：具有Chrome版本74.0（64位）和Firefox 67.0（64位）的Linux

类似问题

两年前有this question，基本上描述了相同的问题（显然是旧版的Chrome）。由于从未回答过该问题，而是要求提供CodePen / JSFiddle示例，因此我决定使用请求的JSFiddle来询问我的问题版本。

背面可见性不适用于Chrome中的svg元素

0 个答案: