如何在翻轉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/