How can I remove the shadow of a container when flipping a div?

Question

I'm trying to create a card which will come into focus on mouse rollover (ie, I increase the size and shadow so the card becomes 'more 3D') and flip over to reveal more information on mouse click.

At the moment, I have it working almost perfectly - the only problem is that I have to use a container to hold everything in perspective, and I apply the hover and focus effects to this - which means when I flip the card, its shadow remains and ruins the effect. I have a demo here to make this clear:

http://jsfiddle.net/dbPf4/14/

This is the HTML:

<div id=f1_container>

<input type="checkbox" id="button">
<label class="f1_card" for="button">
    <div class="front face">
      <img src="http://css3.bradshawenterprises.com/images/Cirques.jpg">
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
</label>
</div>

and this is the CSS:

#f1_container:hover,#f1_container:focus{
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}  

#f1_container{
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}

input{display:none}

.f1_card {
    width:100%;
    height:100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
    display:block;
}

input:checked + .f1_card{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
} 

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

Answer 1

Assign your shadow to f1_card

It's means that your css code is:

#f1_container:hover,#f1_container:focus{
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}  

#f1_container{
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}

input{display:none}

.f1_card {
    width:100%;
    height:100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
    display:block;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

input:checked + .f1_card{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -moz-box-shadow:-5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: -5px 5px 7px rgba(33,33,33,.7);
  box-shadow: -5px 5px 7px rgba(33,33,33,.7);
} 

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

#f1_container:hover .f1_card,#f1_container:focus .f1_card{
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
}

#f1_container:hover input:checked + .f1_card, #f1_container:focus .f1_card input:checked + .f1_card{
  -moz-box-shadow:-10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: -10px 10px 7px rgba(0,0,0,.7);
  box-shadow:-10px 10px 7px rgba(0,0,0,.7);
}

See this: http://jsfiddle.net/dbPf4/19/

Answer 2

What about adding some Jquery

$(".front.face").click(function(){
    $("#f1_container").css("box-shadow","none");
    $("#f1_container").css("-webkit-box-shadow","none");
});

$(".back.face.center").click(function(){
    $("#f1_container").css("box-shadow","5px 5px 7px rgba(33,33,33,.7)");
    $("#f1_container").css("-webkit-box-shadow","5px 5px 7px rgba(33,33,33,.7)");
});

Its not perfect but you get the idea..

Demo:

http://jsfiddle.net/dbPf4/16/