"dönüşümü" ile bir blok içinde tüm içerik

Question

Aşağıda bozulur, iki aynı rakamları görebilirsiniz (eş kenar dörtgen). 2. ve 4. bloklardaki tüm içerik bozulur.

Aşağıdaki nedenlerden biri nedeniyle gerçekleşir: .content div vardır overflow: hidden;

Eğer .outer div vardır

• Eğer transform: rotateY(0deg) veya backface-visibility: hidden;.content3d div (Firefox) transform-style: preserve-3d; sahiptir
• ise (Chrome'da)

bir bahsedilmektedir css özelliklerini çıkarmadan bunu düzeltmek için nasıl Bove?

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

onlar bir şey yapıyor gibi görünmüyor, neden onları orada var: senin dönüşüm gibi

görünüyor

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

soruna neden var?