如何使翻轉卡響應

我試圖創建翻轉卡多次。我可以使用preserve-3d屬性創建翻轉效果，但它在IE 11中不起作用。我再次搜索網頁並嘗試創建翻轉效果。我能做到這一點。翻轉卡現在適用於Chrome，Firefox和IE 11，但最終的翻蓋卡沒有響應。如何使翻轉卡響應

下面是代碼：

.card { 
 
    max-width: 500px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 
.card > div { 
 
    width: 500px; 
 
    height: 300px; 
 
    position: absolute; 
 
    transition: transform 3s; 
 
    border-radius: 25px; 
 
    padding: 20px 20px 20px 20px; 
 
    overflow: hidden; 
 
} 
 
.card > .front { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: green; 
 
} 
 
.card:hover .front { 
 
    transform: rotateY(90deg); 
 
} 
 
.card > .back { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: lime; 
 
    transform: rotateY(-90deg); 
 
} 
 
.card:hover .back { 
 
    transform: rotateY(0deg); 
 
} 
 
.Card-Shadow { 
 
    box-shadow: 3px 3px 3px brown; 
 
    -webkit-box-shadow: 3px 3px 3px brown; 
 
    /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */ 
 
} 
 
@media only screen and (max-width: 500px) { 
 
    .card { 
 
    width: 100%; 
 
    } 
 
    .back { 
 
    width: 100%; 
 
    } 
 
    .front { 
 
    width: 100%; 
 
    } 
 
}

<div class="card"> 
 
    <div class="front Card-Shadow">Hello</div> 
 
    <div class="back Card-Shadow">Thank You</div> 
 
</div>

可以以使其響應任何一項幫助嗎？

來源

2016-09-17 Abha

只是最小寬度和小改變在你的卡>格填充部分和刪除媒體查詢..因爲它的自動響應現在。檢查它在IE 11


 

 
     .card { 
 
     position: relative; 
 
     } 
 
    .card > div { 
 
     min-width: 100%; 
 
     height: 300px; 
 
     position: absolute; 
 
     transition: transform 3s; 
 
     border-radius: 25px; 
 
     padding: 20px 0px 20px 2px; 
 
     overflow: hidden; 
 
    } 
 
    .card > .front { 
 

 
     background-color: green; 
 
    } 
 
    .card:hover .front { 
 
     transform: rotateY(90deg); 
 
    } 
 
    .card > .back { 
 

 
     background-color: lime; 
 
     transform: rotateY(-90deg); 
 
    } 
 
    .card:hover .back { 
 
     transform: rotateY(0deg); 
 
    } 
 
    .Card-Shadow { 
 
     box-shadow: 3px 3px 3px brown; 
 
     -webkit-box-shadow: 3px 3px 3px brown; 
 
     /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */ 
 
    }

<div class="card"> 
 
     <div class="front Card-Shadow">Hello</div> 
 
     <div class="back Card-Shadow">Thank You</div> 
 
    </div>

來源

2016-09-17 17:29:03

感謝有用的提示！但我有一個問題：如何改變填充有助於使代碼響應？ – Abha

填充不會使其響應。你填充 - 留下20px的卡片div。所以它爲兩張卡片添加了額外20px寬度的填充。你可以檢查它再次添加20px在您的瀏覽器。我只是編輯你的代碼只是爲了使它響應。 –

如何使翻轉卡響應

回答

相關問題