翻转图像css变换

Question

我有两个图像在彼此之上，我正在使用 CSS 转换首先将顶部和底部图像旋转开，然后将底部图像旋转回来，创建翻转效果。但是，当取消悬停动画状态立即更改为另一个图像时，我无法让它完美地工作。

js

$('.portfolio-pic-1').hover(function(){
    $(this).toggleClass('portfolio-pic-1-hover');
    $('.portfolio-pic-1-2').toggleClass('portfolio-pic-1-2-hover');
},
function()
{   
    $(this).toggleClass('portfolio-pic-1-unhover');
    $('.portfolio-pic-1-2').toggleClass('portfolio-pic-1-2-unhover');
});

css

    .portfolio-pic-1-hover {
    -webkit-animation: rotate-away 1s 1 ease-in forwards;
    /* Safari 4+ */
    -moz-animation: rotate-away 1s 1 ease-in forwards;
    /* Fx 5+ */
    -o-animation: rotate-away 1s 1 ease-in forwards;
    /* Opera 12+ */
    animation: rotate-away 1s 1 ease-in forwards;
    /* IE 10+, Fx 29+ */
}
.portfolio-pic-1-2-hover {
    -webkit-animation: rotate-in 2s 1 ease-out forwards;
    /* Safari 4+ */
    -moz-animation: rotate-in 2s 1 ease-out forwards;
    /* Fx 5+ */
    -o-animation: rotate-in 2s 1 ease-out forwards;
    /* Opera 12+ */
    animation: rotate-in 2s 1 ease-out forwards;
    /* IE 10+, Fx 29+ */
}
.portfolio-pic-1-unhover {
    -webkit-animation: rotate-in 2s 1 ease-out forwards;
    /* Safari 4+ */
    -moz-animation: rotate-in 2s 1 ease-out forwards;
    /* Fx 5+ */
    -o-animation: rotate-in 2s 1 ease-out forwards;
    /* Opera 12+ */
    animation: rotate-in 2s 1 ease-out forwards;
    /* IE 10+, Fx 29+ */
}
.portfolio-pic-1-2-unhover {
    -webkit-animation: rotate-away 1s 1 ease-in forwards;
    /* Safari 4+ */
    -moz-animation: rotate-away 1s 1 ease-in forwards;
    /* Fx 5+ */
    -o-animation: rotate-away 1s 1 ease-in forwards;
    /* Opera 12+ */
    animation: rotate-away 1s 1 ease-in forwards;
    /* IE 10+, Fx 29+ */
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes rotate-away {
    0% {
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
    100% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
}
/* Standard syntax */
 @keyframes rotate-away {
    0% {
    }
    100% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
}
@keyframes rotate-in {
    0% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    50% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    100% {
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes rotate-in {
    0% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    50% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    100% {
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
}
.img-container {
    position: relative;
    height: 507px;
    padding-bottom: 25px;
}
.img-container img {
    position: absolute;
    left: 25%;
    overflow: hidden;
}

有人能帮忙吗？

Answer 1

我想这就是你要找的东西，我已经创建了 220 像素的方形块（根据你的要求更改），其中有你链接的图像作为背景。

JSFiddle

CSS

.flip-container {
    position:relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
.flip-container:hover .flipper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    filter: FlipH;
    -moz-filter: FlipH;
    -ms-filter:"FlipH";
}
.flip-container, .front, .back {
    width: 220px;
    height: 220px;
}
.flipper {
    -webkit-transition: 0.8s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -moz-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    color:red;
}

.front:hover {
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
}

.front
{

    background:url('http://s27.postimg.org/ibckqwzub/black.png') no-repeat;
    background-size:100% 100%;
}

.back {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter: FlipH;
    background:url('http://s27.postimg.org/8pj0am8oj/rainbow.png') no-repeat;
    background-size:100% 100%;
}
.front-title {
font-size:20px;
text-align:center;
} 
.back-title {
font-size:25px;
text-align:center;
}

HTML

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <div class="front-title">I am front Text</div>
        </div>
        <div class="back">
            <div class="back-title">I am text behind </div>
        </div>
    </div>
</div>

Answer 2

在您的 Fiddle 中，只需将 Hover 的使用更改为 Mouseover 看起来在您的代码中工作得更好。

$('.portfolio-pic-1').mouseover(function () {
$(this).toggleClass('portfolio-pic-1-hover');
$('.portfolio-pic-1-2').toggleClass('portfolio-pic-1-2-hover');

},

我喜欢 divy3993 发布的版本。干得漂亮！

翻转图像css变换

Flipping image css transformation

jquery

html

css

css-animations