用CSS创建翻转动画

本贴最后更新于 3161 天前,其中的信息可能已经时移世改

       CSS 动画是非常有意思的,用一些简单的属性就可以创建出来,从优雅的淡入到更加惊艳的效果都可以,翻页效果就是其中之一,它通过在容器的正面跟反面包含不同的内容来加以实现。本文就是用尽可能简单的方法来实现这种效果。

查看演示

       注:本文不是第一篇讲述这种效果怎么做的文章,但是我发现很多将这个的文章都过于复杂,添加了很多额外的样式代码到案例里面,让读者搞不清那些代码是需要的哪些不是。本文不会有这个问题,只含有一些必要的样式,你可以随意美化翻转的每个页。

##HTML 结构##

       以下 HTML 结构就是为了达到有两面的效果的:

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

  正如你预料的,有两个内容面板:正面跟反面。你将惊奇的发现包含的 CSS 样式不多:

/* 整个容器,包括透视 */
.flip-container {
    perspective: 1000;
}

/* 鼠标放上去的时候翻转 */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

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

/* 翻转速度设置 */
.flipper {
    transition: 1.5s;
    transform-style: preserve-3d;

    position: relative;
}

/* 翻转页的时候隐藏背面 */
.front, .back {
    backface-visibility: hidden;

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

/* 前面板放在上面 */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* 背面初始的时候隐藏 */
.back {
    transform: rotateY(180deg);
}

       我们来看下大体的实现过程:

  • 最外面的容器设置了整个动画区域的透视范围
  • 内层的容器是真正用于翻转的元素,父容器被激活的时候翻转了 180 度。这也是控制翻转速度的地方,把翻转角度改成-180 度就会反方向翻转了。
  • 正面和反面的元素被决定定位了,这样他们就可以很好的层叠在彼此之上。他们的 backface-visibility 属性是 hidden, 所以当正面或者反面显示的时候,背面就隐藏起来。
  • 正面元素比反面元素有一个比较高的 z-index 属性值所以它可以预先编码和显示在上层。
  • 反面元素旋转了 180 度,成了背面。

       以上就是所有要做的了,将这个简单的结构放在你想放的地方,修改你需要的正面跟反面的样式。

##来自 CSS 动画专家 Ana Tudor 的说明##

       在卡片元素上给属性设置确定的值(比如 overflow: hidden)将禁止有 3D 变换的子元素。我相信这是很重要的,因为我就曾这样设置过,导致所有的子元素都成了一样的 3D 变换了。

##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 垂直翻转##

       想要实现垂直翻转就需要添加 transform-origin 坐标轴的值。原来的翻转样式需要更新才能实现垂直地翻转。

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

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

.vertical.flip-container .flipper {
    transform-origin: 100% 213.5px; /* 高度值的一半 */
}

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

       你将看到绕着 X 轴翻转的效果。

##支持 IE 浏览器##

       要兼容 IE 浏览器就需要对代码进行一些改动,因为 IE 还没兼容所有现代 transform 的属性。 本质上还是正面跟反面元素同时翻转。

/* 整个容器,包括透视 */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}

/*  注意这里有修改 */
.flip-container:hover .back {
    transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
}

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

/* 翻转速度设置 */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* 翻转页的时候隐藏背面 */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

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

/* 注意这里有修改 */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* 背面初始的时候隐藏 */
.back {
    transform: rotateY(-180deg);
}

/* 
    垂直翻转的修改
*/
.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 以上工作了。

查看演示

       CSS 翻转动画是很经典的,是 CSS 动画运用的代表性例子。稍加深入,就是 3D CSS 动画效果了,CSS 代码真的算是很少了。这个效果对于 HTML5 游戏是很优雅的。对于卡片式的效果,简直完美。

本文译自 https://davidwalsh.name/css-flip

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • 翻译
    58 引用 • 84 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 5 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 372 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 2 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • danl
    132 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 19 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 721 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 2 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注