最近我们网站要上线一个页面，要做一个轮播。我一般接触的轮播，都是淡入淡出或者左右切入切出，那天产品说要做一个书的翻页的效果，就是书从一角掀起然后向着一个方向走的效果。跟带我的同事对了一下，他跟我说做一个淡入淡出的效果就可以了，太复杂的效果浏览器的兼容性很麻烦。话虽如此，但还是查了一下，并且尝试实现了一个demo，不过自己的空间想象能力太差...
最后的结果是参照这个示例来做的，最后我做出来的效果是这样子，
可以在这个网站上看到最后运行的结果。
整个这个效果是通过CSS3的transform来实现的，主要用到了translate和rotate，平移和旋转。这里面因为综合用到了这两种变换，并且我们需要设置transform-origin（变形的基准点），所以可能会对变换的结果产生疑惑。
我之前对css3用的很少，我很疑惑这两种变形设定的值到底是相对于什么来说的。举个栗子，有旋转和平移两种变形的情况下，旋转的设定是根据平移之前的位置来设定的还是平移之后的位置来设定的？如果有transform的情况下，又产生了transform，比如说平移到（10, 20）的位置，基准点是最开始的点还是本次变形之前（第一次变形）的位置？如果有transform-origin的设定呢，平移过程中这个位置是相对的还是绝对的？我其实就很疑
最低0.47元/天 解锁文章
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
