CSS - 重叠的div

Question

我没有任何代码可供使用。

我想添加两个重叠的div，然后使用新的CSS3旋转功能。我想创建的效果显示在这个页面上。

要求

• 我不想使用图片
• 我不介意使用CSS3
• 应该很容易将整个内容居中对齐（这使得使用position: absolute;更加困难）。
• 它将成为框内内容下方的内容（这使得使用position: absolute;更加困难）。
• 如果能够不使用过多的position: absolute;就更好了。
• 我更喜欢无表格的解决方案。

玩得开心！

- Jens Törnell

---

如果你遇到问题，我们会帮助你解决，但我们不会替你完成整个工作... - oezi

这只是三行代码，不是整个工作，仅是页面的一个小细节。感谢您的支持！ - Jens Törnell

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>

- Jens Törnell

Answer 2

我想你可以使用负边距和 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;}

- theorise

---

它没有起作用。不过在你的代码帮助下，我解决了这个问题。谢谢！ - Jens Törnell

Answer 3

虽然您不想使用图像，但您可能应该考虑一下。 并非所有浏览器都支持CSS3，并且会使您的页面无法使用。

但是，如果您仍然想这样做，您至少需要在顶部div上使用position:absolute，否则您不能将一个放置在另一个上方。然后，就可以轻松地在其上使用css3旋转。

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

- Marks

---

Firefox、Safari、Opera 和 Google Chrome 支持 CSS3 旋转，但是目前 Internet Explorer 尚不支持。感谢您的评论。Opera 使用以下代码： -o-transform: rotate(30deg); - Jens Törnell

Answer 4

谢谢danixd！代码一开始没能成功，但经过一些修改后终于成功了。这是结果： http://www.devdevote.com/test/

主要的“纸张”在中间重叠，适用于所有现代浏览器，除了IE。

我可能会稍后编辑这个答案，提供更加简洁的解决方案。

- Jens Törnell