HTML和CSS做渐变背景和3D卡片

HTML部分:

CSS部分:
使用弹性布局，让页面元素垂直居中，背景渐变，并增加卡片旋转立体感。

给卡片添加3D属性并设置圆角边框。
注意:让子元素到背面要给父元素加3D属性。
（可以利用贝赛尔曲线定义动画运动轨迹）

定义正反面盒子，弹性布局，并给背面盒子添加旋转180°的属性。

最后定义翻转动画:

大致效果图:

当鼠标经过黄色盒子时鼠标会变成小手，同时盒子会翻转。