CSS - 重叠div

Question

我没有代码可以开始。

我想添加2个相互重叠的div，然后使用新的CSS3 Rotate函数。我要创建的效果显示在this page

上

要求

• 我不想使用图片
• 我不介意使用CSS3
• 应该很容易将整个事物对齐在中心（这使得使用位置更加困难：绝对;）。
• 它的内容将低于盒装内容（这使得使用位置更加困难：绝对;）。
• 如果可能没有太多位置：绝对;它会更好。
• 我更喜欢无桌面解决方案。

玩得开心！

Answer 1

以下是我提出的建议：

http://jsfiddle.net/2mLTf/

如果将来jsfiddle不起作用，请来源：

CSS

#paper {
width: 570px;
min-height: 300px;
float: left;
background: #fff;
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
z-index: 2;
-moz-box-shadow: 0 0 10px #DDD;
-webkit-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
border: 1px solid #DDD;
}

#page {
padding: 20px 0 20px 20px;
min-height: 500px;
background: white;
width: 560px;
margin: 0 auto;
float: left;
margin: 0px 0 20px -570px;
z-index: 3;
transform: rotate(0);
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-box-shadow: 0 0 10px #DDD;
-webkit-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
border: 1px solid #DDD;
}

#container {
padding: 20px 0 0 20px;
width: 590px;
margin: 0 auto;
overflow: hidden;
}

HTML

<div id="container">
<div id="paper"></div>
<div id="page"></div>
</div>

Answer 2

尽管你不想使用图像，但你可能应该考虑一下。 所有浏览器都不支持CSS3，并且使您的页面无法用于许多潜在用户。

但是，如果你仍然想要这样做，你必须至少在top div上使用position：absolute，否则你不能使用另一个。然后使用css3 roate应该很容易。

这里有一些关于旋转的帮助，所以它不仅适用于css3，还适用于webkit和firefox 3.1+： http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Answer 3

我猜你可以使用负边距和z-index

#div1{width: 100px; height: 100px; float: left; z-index: 1;}
#div2{width: 100px; height: 100px; float: left; margin: 0 0 0 -50px; z-index: 2;}
#div3{width: 100px; height: 100px; float: left; margin: 0 0 0 -50px; z-index: 3;}

Answer 4

谢谢danixd！代码不起作用，但它做了一些改动。结果如下： http://www.devdevote.com/test/

主要的“论文”在中间重叠，适用于除IE以外的所有现代浏览器。

我稍后可以使用更清晰的解决方案来编辑​​此答案。