-2

看完教程後，我試圖用css3製作一個類似動畫的Windows 8。爲了顯示問題，我將背景設置爲紅色。我想垂直翻轉整個藍色塊而不是文本。我只是要求上座。讓孩子背景填充可用空間

enter image description here

下面是那些衝在前面的代碼片段和背部：

.front, .back { 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     backface-visibility: hidden; 

     position: relative; 
     display:block; 
     background-color:red; 
     top: 0; 
     left: 0; 
    }

下面是完整的fiddle

來源

2013-08-01 Insane Coder

你能發佈你的HTML標記嗎？ – Jnatalzia

你正在尋找如何動畫它增長，或只是CSS填補該地區？ – css

@css：用小提琴鏈接看編輯的問題。 –

更新3

它看起來LIK e你想要問什麼是如何使用html，css和javascript模仿Windows 8翻轉圖塊。我會建議抽象你的問題，只關注那些細節，而不是提供額外的代碼。它已經被Stack Overflow here詢問。

這裏有一些額外的資源：

嘗試實施這些，如果遇到問題，請提出更具針對性的問題。

下面是你的問題工作示例的相關代碼

HTML

<div class="demo-wrapper"> 
    <div class="dashboard clearfix"> 
     <div class="col1 clearfix flip-container vertical"> 
     <div class="big todos-thumb flipper" > 
      <div class="front" > 
       <p>My Todos</p> 
      </div> 
      <div class="back" > 
       <p>You have 5 more tasks to do!</p> 
      </div> 
     </div> 
    </div> 
</div>

CSS

/*rotate entire block on hover over middle */ 
.vertical.flip-container:hover .flipper { 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transform: rotateX(-180deg); 
} 
/*re-rotate inner background text back to normal*/ 
.vertical.flip-container:hover .back { 
    -webkit-transform: rotate(180deg); 
    -webkit-transform: rotateX(180deg); 
} 
/*normally hide back*/ 
.vertical.flip-container .back { 
    display:none; 
} 
/*hide front on flip */ 
.vertical.flip-container:hover .front { 
    display:none; 
} 
/*show back on flip*/ 
.vertical.flip-container:hover .back { 
    display:block; 
}

見jsFiddle

來源

2013-08-01 16:03:56 KyleMit

：看到底部的小提琴鏈接 –

@InsaneCoder，有沒有一些原因，這不是你要找的？ – KyleMit

：主席先生，我希望整個區塊翻轉。也就是說，當區塊翻轉後，白色背景顯示出來，然後顯示區塊的另一側。類似於windows手機的屏幕保護程序。實際上，我稍後將它轉換爲一個活潑的小部件，其中每個塊在一定的持續時間後不斷翻轉。 –

-1

如果你想讓你的上塊「翻轉」，你將不得不'重建'你的html標記。你實際上是要求（用代碼）翻轉藍框內的內容。

翻轉容器和腳蹼是觸發類。

只求（代碼）加入您的觸發類向右容器翻轉藍盒子。

<div class="col1 clearfix flip-container vertical"> 
    <div class="big todos-thumb flipper"> 
     ...

和..這無關的CSS。

來源

2013-08-01 17:20:15

downvoted沒有評論？ –

讓孩子背景填充可用空間

回答

更新3

見jsFiddle

相關問題