用CSS矩阵变换实现强制横屏

数学是一切的基础

一、背景：

母亲节运营活动是一个翻开的贺卡，最终效果如下：

横屏效果 竖屏效果

在不锁屏的情况下，用户旋转手机，如何保证卡片仍然横向展示？

二、分析思路

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 两个属性。有兴趣的话，我再写一篇文章专门介绍~