问题描述:

I'm trying to implement the rotated box with a shadow found here: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

I'm using the HTML5 Boilerplate if that helps...

The problem is that whenever I try and implement that example myself, everything works fine up until I apply the rotation transform. At this point, the boxes created with the :before and :after pseudo-classes pop in front of the real box, and nothing I can do seems to get them further into the background.

Any ideas why this might be?

Here is my HTML:

<div class="container">

<div class="drop-shadow lifted middle">

<img src="images/polaroid-2.png" />

<p>1</p>

</div>

<div class="drop-shadow lifted middle">

<img src="images/polaroid-2.png" />

<p>2</p>

</div>

<div class="drop-shadow lifted rotated last">

<img src="images/polaroid-2.png" />

<p>3</p>

</div>

<div class="caption">

<p>Caption</p>

<div class="joinnow">Join Now</div>

</div>

</div>

Here is the set up css for the box:

 .container {

position:relative;

z-index:1;

width:600px;

padding:20px;

margin:0 auto;

background:#FAF0D9;

}

.container:after {

content:"";

display:block;

clear:both;

visibility:hidden;

height:0;

font-size:0;

}

/* Shared styles */

.drop-shadow {

position:relative;

float:left;

width:40%;

padding:1em;

margin:2em 10px 4em;

background:#fff;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.drop-shadow:before,

.drop-shadow:after {

content:"";

position:absolute;

z-index:-2;

}

.drop-shadow p {

font-size:16px;

font-weight:bold;

}

/* Lifted corners */

.lifted {

-moz-border-radius:4px;

border-radius:4px;

}

.lifted:before,

.lifted:after {

bottom:15px;

left:10px;

width:50%;

height:20%;

max-width:300px;

-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

-webkit-transform:rotate(-3deg);

-moz-transform:rotate(-3deg);

-ms-transform:rotate(-3deg);

-o-transform:rotate(-3deg);

transform:rotate(-3deg);

}

.lifted:after {

right:10px;

left:auto;

-webkit-transform:rotate(3deg);

-moz-transform:rotate(3deg);

-ms-transform:rotate(3deg);

-o-transform:rotate(3deg);

transform:rotate(3deg);

}

And here is the code that is supposed to apply the rotation effect.

 /* Rotated box */

.rotated {

-webkit-box-shadow:none;

-moz-box-shadow:none;

box-shadow:none;

-webkit-transform:rotate(-3deg);

-moz-transform:rotate(-3deg);

-ms-transform:rotate(-3deg);

-o-transform:rotate(-3deg);

transform:rotate(-3deg);

position:relative;

float:left;

width:40%;

padding:1em;

margin:2em 10px 4em;

background:#fff;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.rotated > :first-child:before {

content:"";

position:absolute;

z-index:-1;

top:0;

bottom:0;

left:0;

right:0;

background:#fff;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

Thanks so much for the help!

相关阅读:
Top