Как добавить эффект спирали на флип-эффект в CSS?

Question

Я создал эту флип-карту, но мне интересно, есть ли способ добавить эффект CSS-спирали, когда он переворачивается, или эффект, похожий на поворот изображения.

здесь у меня есть флип карты демо http://jsfiddle.net/7k1sf8qk/

и вот мой CSS код

.flip-container { 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -o-perspective: 1000; 
    perspective: 1000; 
} 

.flip-container, .front, .back { 
    width: 970px; 
    height: 250px; 
} 

.flipper { 
    -moz-transform: perspective(1000px); 
    -moz-transform-style: preserve-3d; 

    position: relative; 
} 

.front, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 

    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 

    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 

    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 

    -ms-transition: 0.6s; 
    -ms-transform-style: preserve-3d; 

    transition: 0.6s; 
    transform-style: preserve-3d; 


    position: absolute; 
    top: 0; 
    left: 0; 
} 

.back { 
    -webkit-transform: rotateX(-180deg); 
    -moz-transform: rotateX(-180deg); 
    -o-transform: rotateX(-180deg); 
    -ms-transform: rotateX(-180deg); 
    transform: rotateX(-180deg); 
} 

.flip-container:hover .back, .flip-container.hover .back { 
    -webkit-transform: rotateX(0deg); 
    -moz-transform: rotateX(0deg); 
    -o-transform: rotateX(0deg); 
    -ms-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
} 

.flip-container:hover .front, .flip-container.hover .front { 
    -webkit-transform: rotateX(180deg); 
    -moz-transform: rotateX(180deg); 
    -o-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 


.front { 
    z-index: 2; 
} 

Answer 1

К сожалению, вы не можете воссоздать этот эффект, используя разметку вы в настоящее время на месте.

Что я хотел бы порекомендовать, это установить изображение в качестве фона для большого количества элементов высоты набора высоты, которые вы можете установить в строковых стилях, чтобы JavaScript мог управлять эффектом спирали.

Я сделал быстрый codepen, который мы надеемся показать, что я имею в виду:

http://codepen.io/jazibobs/pen/wMvwKP

body { 
 
    background: #555; 
 
} 
 

 
ul { 
 
    background: #fff; 
 
    width: 600px; 
 
    height: 600px; 
 
    margin: 0 auto; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
ul li { 
 
    background-image: url(http://placekitten.com/g/600/600); 
 
    height: 200px; 
 
    background-size: 100% auto; 
 
    -webkit-transition: -webkit-transform 2s ease; 
 
      transition: transform 2s ease; 
 
} 
 
ul li:nth-child(2) { 
 
    background-position: 0 -200px; 
 
    -webkit-transition-delay: 0.2s; 
 
      transition-delay: 0.2s; 
 
} 
 
ul li:nth-child(3) { 
 
    background-position: 0 -400px; 
 
    -webkit-transition-delay: 0.4s; 
 
      transition-delay: 0.4s; 
 
} 
 
ul:hover li { 
 
    -webkit-transform: rotateY(180deg); 
 
      transform: rotateY(180deg); 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>