css - 如何在 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

遗憾的是，您无法使用当前已有的标记重新创建此效果。

我建议将图像设置为大量设置高度的 HTML 元素的背景，然后您可以使用 JavaScript 设置内联样式来管理螺旋效果。

我做了一个快速的代码笔，希望能表达我的意思:

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>