CSS - Overlapping Divs

Question

I have no code to start.

I want to add 2 divs overlapping each other, and then use the new CSS3 Rotate feature. The effect I want to create is shown on this page.

Requirements

• I do not want to use images
• I don't mind using CSS3
• It should be easy to align everything in the center (which makes it harder to use the position: absolute;).
• This will be the content below the contents in the box (which makes it difficult to use the position: absolute;).
• If this is possible without a special provision: absolute; this is better.
• I prefer solutions without tables.

Good luck

Answer 1

Here is what I came up with:

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 .

, , : , , div, . 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/

The main "documents" overlap in the middle, work in all modern browsers, except IE.

I can edit this answer later with a cleaner solution.