html - 使子背景填充可用空间

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;
    }

这是完整的小提琴

Answer 1

更新 3

看起来您要问的是如何使用 html、css 和 javascript 模拟 Windows 8 翻转图块。我建议将您的问题抽象化，只关注这些细节，而不是提供额外的代码。已经在 Stack Overflow 上询问过。

以下是一些额外的资源：

• 带有 HTML、CSS3 和 JavaScript 的 Windows 8 Metro Tiles
• 翻动！一个 jQuery 插件
• 地铁瓷砖 - GitHub
• 设计小屋翻转瓷砖
• 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 标记。您实际上是在要求（在代码中）翻转蓝色框中的内容。

Flip-container 和 Flipper 是你的触发类。

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

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

和..这与css无关。