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

How to create a card flip effect on DIV using javascript

本文关键字：翻转 创建 何使用 javascript DIV      更新时间：2023-09-26

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

如有任何帮助，我们将不胜感激。

谨致问候，manishekhawat

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

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

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

如何实现：

CSS动画非常有趣；它们的美妙之处在于，通过许多简单的特性，你可以创造任何东西，从优雅的渐变到WTF皮克斯引以为傲的效果。介于两者之间的一种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>

正如您所期望的，有两个内容窗格，"front"answers"back"，但也有两个包含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的元件父容器悬停在其上时的度数。这也是您可以控制过渡速度。将旋转更改为-180度使元件沿相反方向旋转。

  • 前部和后部元素的位置绝对正确，因此可以在同一位置相互"叠加"；他们的背面可见度隐藏，因此在动画。

  • 前部元素具有比后部元素更高的z索引，因此前面的元素可能首先被编码，但它仍然显示在的顶部

  • 背部元件旋转180度，以便充当背部

这就是它的全部！把这个简单的结构放在适当的位置，然后根据你的意愿设计每一面！

CSS翻转切换

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

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

将flip类添加到容器元素将使用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，我刚刚复制了内容。

相关文章：