Safariでキャプションを公開する

Question

キャプションを表示するために画像から回転するはずのWebサイトを作成していますが、何らかの理由で回転していますが、キャプションがSafariに表示されません。ウェブサイトには、[lomsasd.com/Graphic.html][1]

あるCSSコードです：これはあなたの問題を解決するかどうか

.designers-item figure img { 
 
    display:inline; 
 
    position:relative; 
 
    z-index:10; 
 
    
 
} 
 
.designers-item figure figcaption { 
 
    display:inline; 
 
    position:absolute; 
 
    z-index:5; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box 
 
} 
 
.designers-item figure h2 { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color:#fff; 
 
    font-size:20px; 
 
    text-align:left; 
 
    margin-top: -4px; 
 
    padding-top: 0; 
 
    
 
} 
 
.designers-item figure p { 
 
    font-family: 'Open Sans', sans-serif; 
 
    margin-top: -10px; 
 
    display: inline-block; 
 
    font-size:14px; 
 
    line-height:18px; 
 
    color:#fff; 
 
    text-align:left 
 
} 
 
.designers-item figure figcaption { 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    padding: 10px 10px; 
 
    background-color: #995E80; 
 
    backface-visibility:hidden; 
 
    -webkit-transform:rotateY(-180deg); 
 
    -moz-transform:rotateY(-180deg); 
 
    transform:rotateY(-180deg); 
 
    -webkit-transition:all .5s; 
 
    -moz-transition:all .5s; 
 
    transition:all .5s; 
 
    text-align: center; 
 
} 
 
.designers-item figure img { 
 
    backface-visibility:hidden; 
 
    -webkit-transition:all .5s; 
 
    -moz-transition:all .5s; 
 
    transition:all .5s 
 
} 
 
.designers-item figure:hover img,figure.hover img { 
 
    -webkit-transform:rotateY(180deg); 
 
    -moz-transform:rotateY(180deg); 
 
    transform:rotateY(180deg) 
 
} 
 
.designers-item figure:hover figcaption,figure.hover figcaption { 
 
    -webkit-transform:rotateY(0); 
 
    -moz-transform:rotateY(0); 
 
    transform:rotateY(0) 
 
}

おかげ

Answer 1

を参照してください。 警告：私は自分と違うCSSクラスの名前を使用しました。

HTML：

<div class="container"> 
    <div class="item"> 
     <figure> 
      <img src="http://www.eldes.com.br/wp-content/uploads/2017/01/chalkboard-burger-detail-1.jpg" /> 
      <figcaption>Figura 1</figcaption> 
     </figure> 
    </div> 
    <div class="item"> 
     <figure> 
      <img src="http://www.eldes.com.br/wp-content/uploads/2017/01/chalkboard-burger-detail-1.jpg" /> 
      <figcaption>Figura 2</figcaption> 
     </figure> 
    </div> 
    <div class="item"> 
     <figure> 
      <img src="http://www.eldes.com.br/wp-content/uploads/2017/01/chalkboard-burger-detail-1.jpg" /> 
      <figcaption>Figura 3</figcaption> 
     </figure> 
    </div> 
</div> 

CSS：

.container { 
    display: flex; 
    flex-flow: row wrap; 
} 

.item { 
    display: block; 
    flex: 0 0 200px; 
    margin-left: 20px; 
    border: 1px solid #000; 
    width: 200px; 
    height: 200px; 
} 

.item figure { 
    display: flex; 
    flex-flow: column nowrap; 
    margin: 0px; 
    padding: 0px; 
} 

.item figure img { 
    position: absolute; 
    z-index: 2; 
    display: block; 
    flex: 0 0 200px; 
    width: 200px; 
    height: 200px; 
    -webkit-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    transition: transform 1s, z-index 1s; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.item figure figcaption { 
    position: absolute; 
    z-index: 1; 
    display: block; 
    flex: 0 0 200px; 
    width: 200px; 
    height: 200px; 
    background-color: #FF0; 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    -webkit-transition: transform 1s, z-index 1s; 
    transition: transform 1s, z-index 1s; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.item:hover figure img { 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.item:hover figure figcaption { 
    z-index: 2; 
    -webkit-transform: rotateY(360deg); 
    transform: rotateY(360deg); 
} 

重要な点は、特性遷移、がとz屈折率変換です。 これがあなたを助けてくれることを願っています。