CSS动画是非常有意思的,用一些简单的属性就可以创建出来,从优雅的淡入到更加惊艳的效果都可以,翻页效果就是其中之一,它通过在容器的正面跟反面包含不同的内容来加以实现。本文就是用尽可能简单的方法来实现这种效果。
卡片翻转效果
查看演示
注:本文不是第一篇讲述这种效果怎么做的文章,但是我发现很多将这个的文章都过于复杂,添加了很多额外的样式代码到案例里面,让读者搞不清那些代码是需要的哪些不是。本文不会有这个问题,只含有一些必要的样式,你可以随意美化翻转的每个页。
以下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);}
我们来看下大体的实现过程:
以上就是所有要做的了,将这个简单的结构放在你想放的地方,修改你需要的正面跟反面的样式。
在卡片元素上给属性设置确定的值(比如 overflow: hidden)将禁止有3D变换的子元素。我相信这是很重要的,因为我就曾这样设置过,导致所有的子元素都成了一样的3D变换了。
如果你想用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")
想要实现垂直翻转就需要添加 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还没兼容所有现代 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