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

Question

我正在尝试创建一张卡片，它会关注鼠标悬停（即，我增加了卡片的大小和阴影，使卡片变得“更 3D”）并翻转以显示更多关于鼠标点击的信息。

目前，我几乎可以完美地运行它 - 唯一的问题是我必须使用一个容器来透视所有内容，并对其应用悬停和焦点效果 - 这意味着当我翻转卡片时，它的影子仍然存在并破坏了效果。我在这里有一个演示来说明这一点：

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

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

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

将你的影子分配给f1_card

这意味着你的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);
}

看到这个：http://jsfiddle.net/dbPf4/19/

Answer 2

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

它并不完美，但你明白了..

演示：

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