3

我没有代码可以开始。

我想添加 2 个相互重叠的 div，然后使用新的 CSS3 Rotate 函数。我要创建的效果显示在此页面上

要求

  • 我不想使用图片
  • 我不介意使用 CSS3
  • 将整个东西对齐在中心应该很容易（这使得使用 position: absolute; 变得更加困难）。
  • 它将是盒装内容下方的内容（这使得使用 position: absolute; 变得更加困难）。
  • 如果没有太多位置是可能的：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 ，否则您无法获得另一个。然后应该很容易使用 css3 roate 就可以了。

这里有一些关于旋转的帮助，所以它不仅适用于 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

谢谢丹尼斯！该代码不起作用，但做了一些更改。结果如下：http: //www.devdevote.com/test/

主要的“论文”在中间重叠，适用于除 IE 之外的所有现代浏览器。

稍后我可能会使用更干净的解决方案来编辑​​此答案。

于 2010-06-17T10:11:30.370 回答