简单的卡片翻转和缩放

问题是，当其中一个div卡被隐藏时，它不会得到:hover。你可能可以用jQuery动画来做这件事，但我不知道如何做。我所做的是改进了你的switchImg（）函数。

我采用的解决方案非常基本。去除了过渡，以停止前图像/后图像之间出现的间隙。这些图像现在正在预加载，以使翻转看起来是即时的。

CSS

#preload { 
display: none; 
}
#container-a {
float:left;
position:relative;
margin:auto 0;
width:100%;
}
#one, #two, #three, #four, #five, #six {
z-index:10;
}
#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
transform: scale(2);
-webkit-transform: scale(2);
}

JS-

function switchImg(a,b) {
$('#'+a).css('display', 'none');
$('#'+b).css('display', 'inline');   

}

HTML

<div id="preload">
<img src="https://lh4.googleusercontent.com/-mFYEpMXprYY/VEbJwkJXJaI/AAAAAAAALp4/9GduJ-BGvFk/s524/example-a.jpg" width="1" height="1" alt="A" />
<img src="https://lh6.googleusercontent.com/-ElSRd-aC0lI/VEbJ0fwy4rI/AAAAAAAALqQ/kVli8v9s-Cw/s524/example-b.jpg" width="1" height="1" alt="B" />
<img src="https://lh5.googleusercontent.com/-XfqG26ltMm4/VEbJ0egpaUI/AAAAAAAALqM/Q3eL6avhUJQ/s524/example-c.jpg" width="1" height="1" alt="C" />
<img src="https://lh4.googleusercontent.com/-KieQ3h-5Lp8/VEbJ0fjArLI/AAAAAAAALqI/bYxzgCuxQxo/s524/example-d.jpg" width="1" height="1" alt="D" />
<img src="https://lh5.googleusercontent.com/-aa_TydW4QbA/VEbKcwU_foI/AAAAAAAALqY/_fEGuyjnb5c/s524/example-e.jpg" width="1" height="1" alt="E" />
<img src="https://lh4.googleusercontent.com/-eLsaIjwvgWU/VEYZZaKkPVI/AAAAAAAALps/9eeXxPJ55yE/s524/card-back-c.jpg" width="1" height="1" alt="F" />
</div>
<div id="container-a">
<!-- Card One -->
<img id="one" style="cursor:pointer; width:30%;" onclick="switchImg('one','two')" src="https://lh4.googleusercontent.com/-mFYEpMXprYY/VEbJwkJXJaI/AAAAAAAALp4/9GduJ-BGvFk/s524/example-a.jpg" alt="A" />
<img id="two" style="display:none; cursor:pointer; width:30%;" onclick="switchImg('two','one')" src="https://lh6.googleusercontent.com/-ElSRd-aC0lI/VEbJ0fwy4rI/AAAAAAAALqQ/kVli8v9s-Cw/s524/example-b.jpg" alt="B" />
<!-- Card Two -->
<img id="three" style="cursor:pointer; width:30%;" onclick="switchImg('three','four')" src="https://lh5.googleusercontent.com/-XfqG26ltMm4/VEbJ0egpaUI/AAAAAAAALqM/Q3eL6avhUJQ/s524/example-c.jpg" alt="C" />
<img id="four" style="display:none; cursor:pointer; width:30%;" onclick="switchImg('four','three')" src="https://lh4.googleusercontent.com/-KieQ3h-5Lp8/VEbJ0fjArLI/AAAAAAAALqI/bYxzgCuxQxo/s524/example-d.jpg" alt="D" />
<!-- Card Three -->
<img id="five" style="cursor:pointer; width:30%;" onclick="switchImg('five','six')" src="https://lh5.googleusercontent.com/-aa_TydW4QbA/VEbKcwU_foI/AAAAAAAALqY/_fEGuyjnb5c/s524/example-e.jpg" alt="E" />
<img id="six" style="display:none; cursor:pointer; width:30%;" onclick="switchImg('six','five')" src="https://lh3.googleusercontent.com/-_wQu4iMCRaY/VEbK0snmzAI/AAAAAAAALqg/d1F76OXqE7U/s524/example-f.jpg" alt="F" />
</div>

查理为这个简短的项目做出了重大贡献。这个版本的一个工作示例出现在Fiddle上。

在不久的将来，我将使用Wezelkrozum的例子开发一个更现实的版本，其中透视了rotateY，并在列表中切换类。

无需使用javascript。现在你可以用CSS来完成这一切。

为了正确处理悬停状态，你需要用1个div包围这两个图像，并使他的悬停状态在你的css中领先。

使用display:none将无法设置元素的动画。还有另一个隐藏元素的技巧，它对你很有用。当您将元素旋转180度时，可以使用backface visibility:hiddencss属性仅为元素提供1个面，而不是默认的2个面。

与transform:rotateX（）相结合，可以获得以下jsFiddle：http://jsfiddle.net/odqvozwL/

编辑：我进一步改进了我的答案。我清理了一些html标记，添加了一个小脚本，想象了您想要什么，并将其添加到示例中。这是jsFiddle：http://jsfiddle.net/7sp5qtmh/

CSS

#container {
    width: 80%;
    margin: 10% auto 0 auto;
}
.card {
    width: 20%;
    margin-right: 5%;
    display: inline-block;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.card > img {
    position: absolute;
    width: 100%;
    -webkit-transition: .75s ease;
    -moz-transition: .75s ease
    -o-transition: .75 ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}
.card > img:nth-child(2) {
    transform: rotateX(180deg);
}
.card.turned {
    z-index: 2;
}
.card:hover {
    z-index: 3;    
}
/* Hover states */
.card:hover > img {
    transform: scale(2);
}
.card:hover > img:nth-child(2) {
    transform: scale(2) rotateX(180deg);
}
/* Clicked states */
.card.turned > img:nth-child(1) {
    transform: scale(1) rotateX(-180deg);
}
.card.turned > img:nth-child(2) {
    transform: scale(1);
}
.card.turned:hover > img:nth-child(1) {
    transform: scale(2) rotateX(-180deg);
}
.card.turned:hover > img:nth-child(2) {
    transform: scale(2);
}

HTML

<div id="container">
    <!-- Card One -->
    <div class="card">
        <img src="https://lh4.googleusercontent.com/-mFYEpMXprYY/VEbJwkJXJaI/AAAAAAAALp4/9GduJ-BGvFk/s524/example-a.jpg" alt="A" />
        <img src="https://lh6.googleusercontent.com/-ElSRd-aC0lI/VEbJ0fwy4rI/AAAAAAAALqQ/kVli8v9s-Cw/s524/example-b.jpg" alt="B" />
    </div>
        <!-- Card Two -->
    <div class="card">
        <img src="https://lh5.googleusercontent.com/-XfqG26ltMm4/VEbJ0egpaUI/AAAAAAAALqM/Q3eL6avhUJQ/s524/example-c.jpg" alt="C" />
        <img src="https://lh4.googleusercontent.com/-KieQ3h-5Lp8/VEbJ0fjArLI/AAAAAAAALqI/bYxzgCuxQxo/s524/example-d.jpg" alt="D" />
    </div>
    <!-- Card Three -->
    <div class="card">
        <img src="https://lh5.googleusercontent.com/-aa_TydW4QbA/VEbKcwU_foI/AAAAAAAALqY/_fEGuyjnb5c/s524/example-e.jpg" alt="E" />
        <img src="https://lh3.googleusercontent.com/-_wQu4iMCRaY/VEbK0snmzAI/AAAAAAAALqg/d1F76OXqE7U/s524/example-f.jpg" alt="F" />
    </div>
</div>

Javascript（jQuery）

function turn(){
    //Return turned cards back to their original position
    //$('.card').removeClass('turned');
    //Turn this card
    if(!$(this).hasClass('turned')){
        $(this).addClass('turned')
    } else {
        $(this).removeClass('turned')
    }
}
$(document).ready(function(){
    console.log('ready');
    $('.card').click(turn);
});

您仍然可以通过添加透视特性来进一步实验3D效果。但这应该是你想要的。