3

I have no code to start with.

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

Requirements

  • I don't want to use images
  • I don't mind using CSS3
  • It should be easy to align the whole thing in the center (which makes it harder to use position: absolute;).
  • It's going to be content below the boxed content (which makes it harder to use position: absolute;).
  • If it's possible without too much position: absolute; it's better.
  • I prefer table free solutions.

Have fun!

Improve this question
2
  • 2
    we'll help you if you have problems, but we don't do your whole work... Commented Jun 16, 2010 at 9:37
  • It's just 3 rows and not the whole work, just one effect, a small detail of a page. Thanks for your support! Commented Jun 17, 2010 at 10:14

4 Answers 4

Reset to default
4

Here is what I came up with:

http://jsfiddle.net/2mLTf/

If the jsfiddle will not work in the future, here is the source:

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Altough you dont want to use images, you maybe should think about it. CSS3 is not supported by all browsers, and makes your page unuseable for a lot of potential users.

But, if you still want to do it, you would have to use position:absolute at least on the top div, otherwise you cant get one over the other. And then it should be easy to user the css3 roate on it.

Here is some help on rotation, so it would not only work for css3, but also for webkit and firefox 3.1+: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Improve this answer

1 Comment

Firefox, Safari, Opera and Google Chrome supports CSS3 Rotate. Internet Explorer does not... yet. Thanks for your comment. Opera uses this: -o-transform: rotate(30deg);
1

I guess you could just use negative margins and 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;}
Improve this answer

1 Comment

It did not work. However I solved it with a little help from your code. Thanks!
0

Thanks danixd! The code did not work but with some changes it did. Here is the result: http://www.devdevote.com/test/

The main "papers" are overlapped in the middle, works in all modern browsers except IE.

I might edit this answer later with a more clean solution of it.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.