简单的卡片翻转和缩放

Question

我的目标是拍摄三张卡片图片并使其互动。用户应该能够“拾取”一张卡片，这张卡片是通过悬停开始的CSS缩放，然后在缩放时翻转图像，并使用名为“switchImg”的javascript函数。

Javascript：

function switchImg1() {
if ($('#one').css('display') == 'none') {
    $('#one').css('display', 'inline');
    $('#two').css('display', 'none');
} else {
    $('#one').css('display', 'none');
    $('#two').css('display', 'inline');
}
}

function switchImg2() {
if ($('#three').css('display') == 'none') {
    $('#three').css('display', 'inline');
    $('#four').css('display', 'none');
} else {
    $('#three').css('display', 'none');
    $('#four').css('display', 'inline');
}
}

function switchImg3() {
if ($('#five').css('display') == 'none') {
    $('#five').css('display', 'inline');
    $('#six').css('display', 'none');
} else {
    $('#five').css('display', 'none');
    $('#six').css('display', 'inline');
}
}

CSS：

#container {
float:left;
position:relative;
margin:auto 0;
width:100%;
}
#one, #two, #three, #four, #five, #six {
z-index:10;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
}
#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
transform: scale(2);
}

HTML

<div id="container">
<!-- Card One -->
<img id="one" style="cursor:pointer; width:30%;" onclick="switchImg1()" 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="switchImg1()" 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="switchImg2()" 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="switchImg2()" 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="switchImg3()" 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="switch3Img()" src="https://lh3.googleusercontent.com/-_wQu4iMCRaY/VEbK0snmzAI/AAAAAAAALqg/d1F76OXqE7U/s524/example-f.jpg" alt="F" />
</div>

我的Javascript代码可能是多余的（3个卡的3个功能做同样的事情）但主要问题是在用户放大卡然后尝试翻转它之后 - 图像重新调整大小到它的起始大小，然后重新放大。

有没有办法清理我的代码，还是有更好的方法来处理这个任务？ JSFiddle上有一个相同的例子。

Answer 1

嗯，问题是当其中一个div卡被隐藏时，它将不会被:hover编辑。您可以使用jQuery动画执行此操作，但我不确定如何操作。我做的是我improved your switchImg() function.

Answer 2

无需使用javascript。这些天你可以用CSS完成所有这些。

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

使用 display：none 使得无法为元素设置动画。隐藏元素的另一个技巧对你来说很方便。您可以使用背面 - 可见性：隐藏 css属性在将其旋转180度时为元素提供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效果。但这应该是你想要的。

Answer 3

我使用的解决方案是一个非常基本的解决方案。移除过渡以阻止前图像/后图像之间发生的间隙。图像现在正在预加载，以使翻转看起来是瞬间的。

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>

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

在不久的将来，我将使用Wezelkrozum中的示例开发更逼真的版本，并在视图中使用rotateY切换列中的类。