使子背景填充可用空间

Question

在观看教程之后，我试图使用css3制作像动画一样的Windows 8。为了显示问题，我将背景设置为红色。我想垂直翻转整个蓝色块而不是文本。我只要求顶级块。

以下是红色正面和背面的代码片段：

 .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

Answer 1

更新3

看起来你要问的是如何使用html，css和javascript模拟Windows 8翻转磁贴。我建议抽象你的问题，专注于那些细节，而不是提供额外的代码。它已在Stack Overflow here上被询问。

以下是一些其他资源：

• Windows 8 Metro Tiles with HTML, CSS3 and JavaScript
• Flip! A jQuery plugin
• Metro Tile - GitHub
• Design Shack Flip Tile
• Metro Live Tiles - Drew Greenwell

如果你遇到问题，请尝试实施这些并提出一个更有针对性的问题。

以下是您问题中相关代码的工作示例

<强> 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

Answer 2

如果你想让你的上部块'翻转'，你将不得不'重建'你的html标记。你实际上要求（在代码中）翻转蓝框内的内容。

翻转容器和翻板是你的触发类。

只需要（在代码中）通过将触发类添加到正确的容器来翻转蓝框。

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

和..这与css无关。