css - 带“变换”的块中的所有内容都失真

在下面，您可以看到两个相同的数字（菱形）。第二和第四块中的所有内容都失真。发生这种情况是由于以下原因之一：


如果.outer div具有overflow: hidden;
如果.content div具有transform: rotateY(0deg)或backface-visibility: hidden;（在Chrome中）
如果.content3d div具有transform-style: preserve-3d;（在Firefox中）


如何在不删除上述CSS属性的情况下进行修复？

body {
  font-family: Arial;
}
div {
    width: 100%;
    height: 100%;
}
img {
  height: 100%;
  margin: -20%;
}
.outer {
  float: left;
  width: 200px;
  height: 200px;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid #000;
  margin: 50px;
}
.inner {
  line-height: 200px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: #000;
}
.content3d {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.content {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

<div class="outer">
    <div class="inner">
        <img src="https://pixabay.com/static/uploads/photo/2015/12/25/13/07/plant-1107586_960_720.jpg">
    </div>
</div>
<div class="outer">
    <div class="inner">
        <div class="content3d">
            <div class="content">
                <img src="https://pixabay.com/static/uploads/photo/2015/12/25/13/07/plant-1107586_960_720.jpg">
            </div>
        </div>
    </div>
</div>
<div class="outer" style="clear: both;">
    <div class="inner">
        TEXT
    </div>
</div>
<div class="outer">
    <div class="inner">
        <div class="content3d">
            <div class="content">
                TEXT
            </div>
        </div>
    </div>
</div>

最佳答案

看起来您的转换导致了问题：

.content {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

他们似乎什么也没做，为什么您要在那里？

关于css - 带“变换”的块中的所有内容都失真，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36607863/