Question

下面，你可以看到两个相同的数字（菱形）。第2和第4块中的所有内容都会失真。

这是因为以下原因之一：

如果.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>

Answer 1

看起来你的变换导致了这个问题：

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

看起来他们什么都没做，你为什么要把它们放在那里？

具有“变换”的块中的所有内容都会失真

1 个答案: