Перевернутое преобразование изображения css

Question

У меня есть два изображения друг на друга, я использую преобразования CSS, чтобы сначала поворачивать верхнее и нижнее изображение, а затем поворачивать нижнее изображение обратно, создавая эффект переворота. Однако я не могу заставить его работать безупречно, когда мгновенное отображение состояния анимации изменяется на другое изображение.

JSFiddle

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

Я думаю, что это то, что вы ищете, я создал квадратный блок 220px (изменение согласно вашему требованию), в котором изображение связано с вами как фон.

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 публикуемый. Хорошая работа!