3

そもそもコードがありません。

重なり合う2つのdivを追加してから、新しいCSS3回転機能を使用したいと思います。作成したいエフェクトをこのページに表示します

要件

  • 画像を使いたくない
  • CSS3を使用してもかまいません
  • 全体を中央に揃えるのは簡単なはずです（これにより、position：absolute;が使いにくくなります）。
  • ボックス化されたコンテンツの下のコンテンツになります（これにより、position：absolute;の使用が難しくなります）。
  • あまり多くの位置がなくても可能であれば：絶対; それは良いです。
  • 私はテーブルフリーのソリューションを好みます。

楽しむ！

4

4 に答える 4

4

これが私が思いついたものです：

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>
于 2011-03-08T07:04:39.603 に答える
1

画像は使いたくないのですが、考えてみるべきかもしれません。CSS3はすべてのブラウザでサポートされているわけではなく、多くの潜在的なユーザーがページを使用できなくなります。

ただし、それでも実行したい場合は、少なくとも上部のdivでposition：absoluteを使用する必要があります。そうしないと、一方を他方の上に置くことができません。そして、css3roateを簡単に使用できるはずです。

回転に関するヘルプがいくつかあるので、css3だけでなく、webkitとfirefox 3.1+でも機能します： http ：//www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox -webkit.html

于 2010-06-16T09:37:48.337 に答える
1

負のマージンと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;}
于 2010-06-16T10:10:43.373 に答える
0

danixdに感謝します！コードは機能しませんでしたが、いくつかの変更を加えて機能しました。結果は次のとおりです： http ：//www.devdevote.com/test/

メインの「ペーパー」は中央で重なっており、IEを除くすべての最新のブラウザーで機能します。

私は後でこの答えをよりクリーンな解決策で編集するかもしれません。

于 2010-06-17T10:11:30.370 に答える