Question

我想在DIV上使用简单的javascript和CSS以及NO库或插件创建卡片翻转效果（与webkit过渡和3d变换相同）。我怎样才能做到这一点？因为大多数CSS3属性适用于webkit浏览器。大多数javascript解决方案都使用jquery及其插件等库。我正在寻找一个解决方案，它不使用任何库，但只使用javascript / CSS，仍然可以跨浏览器工作。

任何帮助都将不胜感激。

此致 manishekhawat

Answer 1

CSS3中的3d变换目前仅适用于webkit浏览器。抱歉 - 如果不使用JS polyfill（如cssSandpaper（http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/），则无法在其他浏览器中执行此操作。

不建议这样做，因为在加载JS版本时会导致性能严重下降。

3D变换和关键帧动画仍然是CSS3规范的一个（相当）全新功能，因此仅在最新的浏览器（safari，chrome）中采用。如果你想要一个不需要javascript的跨浏览器解决方案，你将不得不坐在你的拇指上几年。

Answer 2

如何实施：

CSS动画很有趣;它们的美妙之处在于，通过许多简单的属性，你可以创造出任何东西，从优雅的淡入到WTF-Pixar-would-be-骄傲的效果。介于两者之间的CSS效果是CSS翻转效果，即在给定容器的正面和背面都有内容。本教程将向您展示以尽可能简单的方式创建该效果。

HTML

实现双面效果的HTML结构正如您所期望的那样：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

有两个内容窗格，“前面”和“后面”，正如您所期望的那样，还有两个包含由CSS解释的非常具体角色的元素。另请注意ontouchstart片，它允许窗格在触摸屏上交换。

CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

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

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

以下是该过程的粗略概述：

外围容器设置整个动画区域的视角
内部容器是实际翻转的元素，旋转180度父容器悬停在上面的度数。这也是在哪里你控制过渡速度。将旋转更改为-180deg 以相反的方向旋转元素。
前后元素绝对可以定位彼此“叠加”在同一位置;他们的背面能见度被隐藏，因此翻转元素的背面不会显示动画。
前元素的z-index比后元素高，所以前面元素可以先编码，但仍然显示在顶部
背部元素旋转180度，以便充当背部。

真的就是这一切！将这个简单的结构放置到位，然后根据您的喜好设计每一面！

CSS翻转切换

如果你更喜欢这个元素只通过JavaScript翻转命令，那么一个简单的CSS类切换就可以了：

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

将翻转类添加到容器元素将使用JavaScript翻转卡片 - 无需用户悬停。像

这样的JavaScript评论

document.querySelector("#myCard").classList.toggle("flip")会翻转！

CSS垂直翻转

执行垂直翻转就像翻转轴和添加变换原点轴值一样简单。翻盖的原点必须更新，卡片以其他方式旋转：

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

您可以看到使用X访问，而不是Y.

所有信用都归开发者David Walsh所有，我刚刚复制了内容。

如何使用javascript在DIV上创建卡片翻转效果

2 个答案: