CSS翻转动画
你们都要求它，现在我添加了它：Internet Explorer 支持！ 令人烦恼的是，这种变化涉及旋转前面和后面的元素，而不仅仅是容器。 如果您想要 Internet Explorer 代码。 支持IE10+； IE9不支持CSS动画。
你们都要求它，现在我添加了它：Internet Explorer 支持！ 令人烦恼的是，更改涉及旋转元素的正面和背面，而不仅仅是容器。 如果您需要 Internet Explorer 代码，请。 支持IE10+； IE9不支持CSS动画。
CSS 动画很有趣； 它们的美妙之处在于，通过许多简单的属性，您可以创建任何东西，从优雅的淡入到 WTF-Pixar 会感到自豪的效果。 介于两者之间的一种 CSS 效果是 CSS 翻转效果，即给定容器的正面和背面都有内容。 本教程将向您展示如何以尽可能简单的方式创建该效果。
CSS 动画很有趣。 它们的美妙之处在于，通过许多简单的属性，您可以创建任何东西，从高贵的淡入淡出效果到 WTF-Pixar 引以为豪的效果。 CSS 翻转效果是一种中间 CSS 效果，它在给定容器的正面和背面都有内容。 本教程将向您展示如何以最简单的方式创建这种效果。
快速说明：这不是关于此效果的第一个教程，但我发现其他教程过于复杂。 许多其他教程向代码示例添加了额外的样式，然后要求读者辨别哪些是需要的，哪些是不需要的。 本教程避免了这个问题，只为您提供必要的样式； 您可以按照自己喜欢的方式美化翻盖的每一面。
小提示：这不是第一个关于此效果的教程，但我发现其他教程过于复杂。 许多其他教程为代码示例添加了额外的风格，然后要求读者了解需要什么和不需要什么。 本教程回避了这个问题，只为您提供必要的样式。 您可以调整幻灯片的每一侧以满足您的需要。
查看演示 查看演示
HTML（HTML）
实现双面效果的 HTML 结构正如您所期望的那样：
如你所愿，实现双面功效的HTML结构是：
正如您所期望的，有两个内容窗格，“前”和“后”，而且还有两个包含元素，它们具有由 CSS 解释的非常特定的角色。 另请注意 ontouchstart 部分，它允许窗格在触摸屏上交换。 显然，如果您愿意，您应该将该代码分解为一个单独的、不显眼的 JavaScript 块。
正如您所期望的，有两个内容窗格，“前”和“后”，以及两个包含其 CSS 解释特定角色的元素。 另请注意 ontouchstart 片段，它允许在触摸屏上交换竖框。 显然，如果您愿意，您应该将该代码分离到一个独立的、不间断的 JavaScript 块中。
CSS（CSS）
我敢打赌，除了常见的供应商前缀膨胀之外，您会对涉及的 CSS 之少感到惊讶：
我敢打赌，除了常见的供应商前缀膨胀之外，您会惊讶于所涉及的 CSS 如此之少：
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* 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);
}
以下是该过程的粗略概述：
以下是该过程的快速概述：
这真的就是全部了！ 将这个简单的结构放置到位，然后根据您的喜好设计每一面的样式！
真的就这样了！ 将这些简单的结构放置到位，然后根据需要设计每一侧的样式！
CSS 动画专家 Ana Tudor 的注释（CSS 动画专家 Ana Tudor 的注释）
卡元素上的（如溢出：隐藏）将不允许其具有 3D 变换的子元素。 我相信这是相关的，因为我遇到了溢出问题：在这种情况下精确隐藏，其中 3D 转换元素的所有子元素都在同一平面上，但一个或多个已旋转 180 度。
在卡片元素上（例如overflow:hidden）将不允许它有3D变换的子元素。 我认为这很重要，因为我遇到过溢出：隐藏在这些情况下，它是 3D 转换元素，其子元素都在同一平面上，但一个或多个旋转了 180 度，并且此溢出：隐藏 180 度。
CSS 翻转切换
如果您希望元素仅通过 JavaScript 命令翻转，一个简单的 CSS 类切换就可以解决问题：
如果您希望仅通过 JavaScript 启用元素翻转命令，则可以使用简单的 CSS 类切换来实现：
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
将翻转类添加到容器元素将使用 JavaScript 翻转卡片——无需用户悬停。 像 document.querySelector("#myCard").classList.toggle("flip") 这样的 JavaScript 注释将完成翻转！
将翻转类添加到容器元素将使用 JavaScript 翻转卡片 - 无需用户悬停。 像 document.querySelector("#myCard").classList.toggle("flip") 这样的 JavaScript 注释将会翻转！
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 访问权限。
您将看到使用 X 访问而不是 Y 访问。
Internet Explorer 支持（Internet Explorer 支持）
Internet Explorer 需要对标准翻转代码进行重大修改，因为它尚未实现所有现代转换属性。 本质上，前面和后面的元素都需要同时翻转：
Internet Explorer 需要对标准翻转代码进行重大更改css3垂直翻转，因为它仍然没有实现所有现代转换属性。 本质上，前面和后面的元素都需要同时翻转：
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
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;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
通过上面的代码，IE10将按预期旋转翻转元素！
使用前面的代码，IE10将按预期旋转和翻转元素！
查看演示 查看演示
CSS 翻转动画一直是 CSS 动画（以及较小程度上的 3D CSS 动画）可能性的经典、代表性示例。 更好的是实际上只涉及很少的 CSS。 这种效果对于 HTML5 游戏来说确实很简洁，而且作为独立的“卡片”效果css3垂直翻转，它是完美的。 你能想到这个还能用来做什么吗？
CSS 翻转动画仍然是 CSS 动画（以及较小程度上的 3D CSS 动画）可能性的经典、代表性示例。 更好的是，实际上只涉及很少的 CSS。 这种效果对于 HTML5 游戏来说确实很巧妙，作为独立的“卡片”效果它是完美的。 你还能想到其他用途吗？
译自：
CSS翻转动画
