gpt4 book ai didi

css - "transform" block 中的所有内容都被扭曲

转载 作者:行者123 更新时间:2023-12-03 04:56:11 25 4
gpt4 key购买 nike

下面,您可以看到两个相同的图形(菱形)。第二 block 和第四 block 中的所有内容都被扭曲。

出现这种情况是由于以下原因之一:

  • 如果.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 - "transform" block 中的所有内容都被扭曲,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36607863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com