前提：忘了这个属性的具体内容的点击下方链接可以查看
css的transform属性： https://www.runoob.com/cssref/css3-pr-transform.html
有两个值 ：
1.1 flat:在2维平面呈现
1.2 preserve-3d:在3维空间呈现
每个li中放两个span , 最先展示前面的span ,当鼠标滑过的时候，前面的span沿着x轴向下翻转90度，后面的span沿着x轴向上翻转90度。
页面
最后：我目前没找到在中怎么加入视频的，现在看不了动态效果，如果哪位田螺姑娘/小哥知道怎么加入动图，可以留言教我一下，谢谢啦！
css3 翻转和旋转的区别如下：概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate
1、旋转，利用rotate来实现，代码如下：
-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg)指定firefox浏览器私有属性
transform:rotate(10deg)一般浏览器翻转的角度为10弧度
2、 翻转，利用scale来实现，代码如下：
scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转
水平翻转：
-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转
-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转
transform:scale(-1，1)水平轴为-1，代表水平翻转
垂直翻转：
-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
transform:scale(1，-1)垂直轴为-1，代表垂直翻转
