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 游戏是很优雅的。对于卡片式的效果,简直完美。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于