数学是一切的基础
一、背景：
母亲节运营活动是一个翻开的贺卡，最终效果如下：
横屏效果
竖屏效果
在不锁屏的情况下，用户旋转手机，如何保证卡片仍然横向展示？
二、分析思路
1、如果想要保证横屏展示的话，则需要把页面进行旋转。
以左上角为旋转中心，旋转0°，45°，85°的效果如下：
transform-origin: 0px 0px 0px;
以几何中心为旋转中心，旋转45°，90°的效果如下：
transform-origin: center;
所以仅通过设置旋转角度和中心是无法实现我们想要的效果的。
三、解决方案
从上面效果看出，可以分为两步来实现：
【1】旋转90度
【2】再把卡片移入可视屏幕范围内
但是同一个元素没办法同时进行两种变换，所以在在层再包裹一层标签wrapper
【尝试一】
在外层wrapper上做 旋转变换，在内层卡片上做 位移变换
为了方便看到具体是如何变换的，只旋转40°，位移-172px，效果如下：
外层绿色旋转40°，内层粉红色位移172px
如图所示，绿色部分是外层wrapper，旋转40度。卡片由于位移172度，有部分已经在wrapper外侧，所以不可见。
这种方式把两种变换独立开来，并不能实现我们想要的一个整体同时进行两种变换的需求。
【尝试二】
在外层wrapper上做位移变换，在内层卡片上做旋转变换
红色为body，绿色为wrapper
所以，由于外层wrapper的位移变换，导致把整个body撑大，远不止是手机屏幕大小。而且，两种变换也是各自独立的。
【尝试三】
其实所有的简单变换，比如旋转、位移、缩放等都是矩阵变换（matrix）的某一种特殊情况。
所以，想要实现对同一个元素同时进行两种及以上的变换效果的话，我们直接用复杂的matrix来组合就可以解决了。
由于篇幅限制，这里不对矩阵变换详细解释，有兴趣的同学可以参考 这一篇文章
代码实现：
矩阵变换
其中 0，1，-1，0 分别代表 cos90°,sin90°,-sin90°,cos90°，做旋转变换
414代表位移偏移量，做位移变换，实际情况需要根据手机屏幕动态改变设置。
最终就可以实现文章开头展示的效果。
四、总结
论学好线性代数的重要性。哈哈哈哈哈哈~
【备注】
卡片打开的效果主要用到了3D变换中的 透视（perspective）和 backface-visibility 两个属性。有兴趣的话，我再写一篇文章专门介绍~
网友评论