CSS - Перекрывающиеся div - PullRequest
Новая
       15

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

3 голосов
/ 16 июня 2010

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

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

Требования

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

Веселитесь!

Ответы [ 4 ]

4 голосов
/ 08 марта 2011

Вот что я придумал:

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>
1 голос
/ 16 июня 2010

Полагаю, вы можете просто использовать отрицательные поля и 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;}
1 голос
/ 16 июня 2010

Хотя вы не хотите использовать изображения, возможно, вам следует подумать об этом.CSS3 поддерживается не всеми браузерами и делает вашу страницу непригодной для использования многими потенциальными пользователями.

Но, если вы все еще хотите это сделать, вам придется использовать position: absolute, по крайней мере, в верхнем divв противном случае вы не можете получить один над другим.И тогда должно быть легко использовать ross на нем css3.

Вот некоторая помощь по ротации, поэтому она будет работать не только для css3, но также для webkit и firefox 3.1+: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

0 голосов
/ 17 июня 2010

Спасибо, Даниксд! Код не работал, но с некоторыми изменениями он работал. Вот результат: http://www.devdevote.com/test/

Основные «документы» пересекаются посередине, работают во всех современных браузерах, кроме IE.

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

...