Css 翻转div时如何移除容器的阴影？

我正在尝试创建一张卡片，该卡片将聚焦于鼠标翻转（即，我增加了大小和阴影，使卡片变得“更3D”），并在鼠标点击时翻转以显示更多信息

目前，我已经让它几乎完美地工作了——唯一的问题是我必须使用一个容器来保存透视图中的所有内容，我将悬停和聚焦效果应用于此——这意味着当我翻转卡片时，它的阴影仍然存在并破坏了效果。我这里有一个演示来说明这一点：

这是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>

---

添加一些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)");
});

这并不完美，但你明白了

演示：

---

将您的阴影分配给

f1\u卡

这意味着您的css代码是：

#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);
}

---

看看这个：

这是我实现这一目标的尝试：谢谢你，这肯定更好！但是当卡片被翻转时，鼠标翻转时阴影只会变暗，只要卡片处于焦点位置，阴影就应该变暗……谢谢，这几乎是完美的！唯一的问题是阴影转换的速度-当卡进入焦点时，它的阴影逐渐出现，但如果我加快速度，我也会以一个非常快的翻转结束…有什么想法吗？当然你也可以使用相同大小的阴影！

#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);
}