5

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

任何帮助，将不胜感激。

问候， 马尼谢卡瓦特

4

2 回答 2

2

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

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

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

于 2012-01-23T19:27:24.793 回答
2

如何实现它：

CSS 动画很有趣；它们的美妙之处在于，通过许多简单的属性，您可以创建从优雅的淡入到 WTF-Pixar-would-be-proud 效果的任何东西。介于两者之间的一种 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 ”和“ 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-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，我刚刚复制了内容。

于 2015-03-04T19:33:38.467 回答