如何在翻转div时删除容器的阴影?

时间:2014-02-21 11:52:56

标签: css html containers shadow

我正在尝试创建一张卡片,它将专注于鼠标翻转(即,我增加了大小和阴影,使卡片变成'更多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;
}

2 个答案:

答案 0 :(得分:0)

添加一些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/

答案 1 :(得分:0)

将您的影子分配到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/