CSS - Перекрывающиеся divs

Question

У меня нет кода для начала.

Я хочу добавить 2 divs, перекрывающиеся друг на друга, а затем использовать новую функцию поворота CSS3. Эффект, который я хочу создать показано на this page

Требования

• Я не хочу использовать изображения
• Я не возражаю, используя CSS3
• Он должен быть легким, чтобы выровнять все в центре (что усложняет использование позиции: absolute;).
• Это будет содержание ниже содержимого в коробке (что затрудняет использование позиции: absolute;).
• Если это возможно без особого положения: абсолютное; лучше.
• Я предпочитаю бесплатные решения для настольных компьютеров.

Удачи!

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 не поддерживается всеми браузерами и делает вашу страницу недоступной для многих потенциальных пользователей.

Но, если вы все еще хотите это сделать, вам придется использовать положение: абсолютное, по крайней мере, на верхнем 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-индекс

#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.

Я мог бы отредактировать этот ответ позже с более чистым решением.