用CSS创建翻转动画

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

       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)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    197 引用 • 547 回帖 • 1 关注
  • 前端

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

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

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • CloudFoundry

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

    5 引用 • 18 回帖 • 165 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    46 引用 • 25 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 453 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    541 引用 • 672 回帖
  • Laravel

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

    20 引用 • 23 回帖 • 724 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 185 关注
  • 工具

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

    285 引用 • 728 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1739 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 101 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 212 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 130 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    404 引用 • 1246 回帖 • 580 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    346 引用 • 1801 回帖 • 3 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3186 引用 • 8212 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 127 关注
  • CodeMirror
    1 引用 • 2 回帖 • 126 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4600 回帖 • 701 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 106 回帖