学会了HTML5的皇上，会怎样翻妃子的牌子？
Posted 黑马程序员教程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学会了HTML5的皇上，会怎样翻妃子的牌子？相关的知识，希望对你有一定的参考价值。
明朝的嘉庆帝自打被宫女谋杀未遂之后
对被窝里的女人顿起防范之心
这段不光彩的历史被清代皇帝的第三只眼看见了
于是他们时刻牢记，女人是老虎，不得小觑
先是顺治帝，以史为鉴
向嘉庆同志学习，不能玩物丧志
后有康熙秉承父亲教诲
专设“敬事房”
负责具体的落地实施
让和妃子睡觉，成为选择题
如何选呢？
通过翻开刻有妃子名称的牌子决定
翻牌子由此开始
最后清朝皇帝集体郁闷
由“奋青”编程“愤青”
但郁闷归郁闷
牌子还得照样翻，觉还得照样睡
在清代翻牌子的方法是
事先做好牌子
通常会有几十个牌子
都放在一个盘子里
牌子由敬事房太监呈上
供皇上翻阅
当有新的妃子或者牌子老旧时
就要重新制作
《甄嬛传》中有一个特别经典的镜头
在翻牌子时
苏培盛突然说丽嫔娘娘的绿头牌沾上了灰
要去重新做一块
但在全民互联的“IT时代”
“翻牌子”有了新的方法
使用html5的3D变形可以轻松实现翻牌效果
使用HTML5的翻牌效果包含以下步骤
今天分享给大家。
第
1
步
准备图片
做好带有妃子名字的电子图片，需要反面和正面两张图片：
第
2
步
搭建网页结构
新建HTML5页面结构，编写图片的结构代码。用一个div元素嵌套两个img元素
<html><head><meta charset="UTF-8"><title>翻牌</title></head><body><div><img class="ka01" src="images/ka01.png"/><img class="ka02" src="images/ka02.png"/></div></body></html>
（左右滑动即可查看完整代码）
第
3
步
控制div样式
为div添加定位属性position，属性值设置为relative。为div添加视距属性perspective，取值为400px。
div{width:223px;height:333px;margin:50px auto;position:relative;perspective:400px;}
第
4
步
控制img样式
为img设置绝对定位position:absolute;。为img添加旋转隐藏属性backface-visibility。为img添加过渡属性，制作旋转动效。将正面牌（ka02）设置为Y轴旋转180度。
img{position:absolute;top:0;left:0;:hidden;transition:all 1s linear 0s;}:rotateY(180deg);}
第
5
步
设置鼠标指针悬浮状态
当鼠标指针悬浮时，反面牌（ka01）沿Y轴旋转-180度，正面牌（ka02）沿Y轴旋转到0度。
div:hover .ka02{transform:rotateY(0deg);}div:hover .ka01{transform:rotateY(-180deg);}
（左右滑动即可查看完整代码）
至此翻牌效果完成，动动鼠标指针
就可以选你们心目中的女神啦！
最后我们总结一下
翻牌效果用到的技术
我们需要用到
定位属性：position
视距属性：perspective
旋转隐藏属性：backface-visibility
过渡属性：transition
3D变形属性：transform
这些技术呢都非常简单
大家想要深入学习的话
可以进一步关注黑马程序员的各类教材
求点赞、求好看、求分享
以上是关于学会了HTML5的皇上，会怎样翻妃子的牌子？的主要内容，如果未能解决你的问题，请参考以下文章
手把手教你用MATLAB制作一款 [狗头翻牌子] 小游戏(点灯游戏)