CSS：翻牌效果？

我一直在試圖創造翻轉卡的效果，但我似乎無法得到它，卡翻轉，但相同的內容是在卡的另一面（除了它是相反的），我無法弄清楚如何用新內容替換它。CSS：翻牌效果？

.container { 
 
    width: 100%; 
 
    height: 800px; 
 
    position: relative; 
 
    top: -80px; 
 
    left: 10px; 
 
} 
 

 

 
.box { 
 
    border: 1px solid #d3d3d3; 
 
    height: 270px; 
 
    width: 250px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 10px; 
 
    border-radius: 5px; 
 
    background-color: #bfd4d9; 
 
    transition: all .5s ease; 
 
    transform-style: preserve-3d; 
 
    perspective: 700; 
 

 

 
} 
 

 
.box:hover { 
 
    transform: rotateY(180deg); 
 
} 
 

 

 
.content-header { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #638ca6; 
 
    border-radius: 5px 5px 0px 0px; 
 
    z-index: -10; 
 
} 
 

 
.content-body { 
 
    position: relative; 
 
    top: 10px; 
 
    left: 12px; 
 
    width: 90%; 
 
    height: 100px; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
    font-family: 'Oxygen', sans-serif; 
 
} 
 

 
.body-text { 
 
    position: relative; 
 
    margin: 5px; 
 
} 
 

 
.posts-whim-header-pic { 
 
    z-index: 10; 
 
    position: relative; 
 
    left: 10px; 
 
    top: 5px; 
 
    border-radius: 10px; 
 
} 
 

 
.posts-whim-header-name { 
 
    width: 180px; 
 
    position: relative; 
 
    top: -70px; 
 
    left: 75px; 
 
    color: white; 
 
    font-size: 20px; 
 
    font-family: 'Oxygen', sans-serif; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
     <div class="content"> 
 
     <div class="content-header"> 
 
      <div class="header-pic"> 
 
      <img src="/assets/profile.jpg" /> 
 
      </div> 
 
      <div class="header-name"> 
 
      </div> 
 
     </div> 
 

 
     <div class="content-body"> 
 
      <div class="body-text"> 
 
     </div> 
 
</div>

來源

2015-02-23 roguerat

哦，請把它放在jsFiddle！ – frenchie 2015-02-23 23:43:24

與你的HTML你不應該期望更多。如果你想在後面添加不同的內容，你需要添加另一個div（例如：div body-text和div body-text-b） – 2015-02-24 00:26:54

也許它會是有用的 - http://davidwalsh.name/css-flip http： //desandro.github.io/3dtransforms/docs/card-flip.html – DonSinDRom 2015-02-24 08:53:39

CSS3 Animations是你的朋友？

它看起來像你翻轉，但它是一招！

.container { 
 
    width: 100%; 
 
    height: 800px; 
 
    position: relative; 
 
    top: -80px; 
 
    left: 10px; 
 
} 
 

 

 
.box { 
 
    border: 1px solid #d3d3d3; 
 
    height: 270px; 
 
    width: 250px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 10px; 
 
    border-radius: 5px; 
 
    background-color: #bfd4d9; 
 
    //transition: all .5s ease; 
 
    transform-style: preserve-3d; 
 
    perspective: 700; 
 
} 
 

 
.box:hover { 
 
    -webkit-animation: flipp 0.5s ; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation:flipp 0.5s ; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@-webkit-keyframes flipp { 
 
    0% { 
 
    transform: rotateY(0deg); 
 
    font-size: 100%; 
 
    } 
 
49% { 
 
    transform: rotateY(0deg); 
 
    font-size: 100%; 
 
    } 
 

 
    50% { 
 
    transform: rotateY(90deg); 
 
    font-size: 200%; 
 
    }   
 
    
 
    100% { 
 
    transform: rotateY(0deg); 
 
    font-size: 200%; 
 
    } 
 
} 
 
@keyframes flipp { 
 
    0% { 
 
    transform: rotateY(0deg); 
 
    font-size: 100%; 
 
    } 
 
49% { 
 
    transform: rotateY(0deg); 
 
    font-size: 100%; 
 
    } 
 

 
    50% { 
 
    transform: rotateY(90deg); 
 
    font-size: 200%; 
 
    }   
 
    
 
    100% { 
 
    transform: rotateY(0deg); 
 
    font-size: 200%; 
 
    } 
 
} 
 
.content-header { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #638ca6; 
 
    border-radius: 5px 5px 0px 0px; 
 
    z-index: -10; 
 
} 
 

 
.content-body { 
 
    position: relative; 
 
    top: 10px; 
 
    left: 12px; 
 
    width: 90%; 
 
    height: 100px; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
    font-family: 'Oxygen', sans-serif; 
 
} 
 

 
.body-text { 
 
    position: relative; 
 
    margin: 5px; 
 
} 
 
.body-text > p{ 
 
color:purple; 
 
margin-left:100px; 
 
} 
 

 
.posts-whim-header-pic { 
 
    z-index: 10; 
 
    position: relative; 
 
    left: 10px; 
 
    top: 5px; 
 
    border-radius: 10px; 
 
} 
 

 
.posts-whim-header-name { 
 
    width: 180px; 
 
    position: relative; 
 
    top: -70px; 
 
    left: 75px; 
 
    color: white; 
 
    font-size: 30px; 
 
    font-family: 'Oxygen', sans-serif; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
     <div class="content"> 
 
     <div class="content-header"> 
 
      <div class="header-pic"> 
 
      </div> 
 
      <div class="header-name"> 
 
      </div> 
 
     </div> 
 

 
     <div class="content-body"> 
 
      
 
     <div class="body-text"> 
 
      <p>test</p> 
 
     </div> 
 
</div>

至於如果你通過相關的背景，你可以切換圖像的圖像導入其內容的變化@keyframe 50％;

來源

2015-02-23 23:56:17 maioman

請勿發佈以webkit爲前綴的代碼。從16年前開始，CSS動畫已經在Firefox中前半身，這已經有很多年了。也就是說，我不明白你的答案是如何解決OP的問題。 – Jeremy 2015-02-24 00:10:16

這是一個鍍鉻的前綴..並有必要對鉻（只對鉻Ë野生動物園）工作 – maioman 2015-02-24 09:04:12

這是令人失望的是[Chrome和Safari落後]（http://stackoverflow.com/questions/28396890/why-does-chrome -still-use-prefix-for-animations），但如果你的代碼片段包含了前綴不動的屬性，它也會很好，所以它也可以在符合規範的瀏覽器中使用。 – Jeremy 2015-02-24 23:58:31

CSS：翻牌效果？

回答

相關問題