【变换】CSS3变换之反射(matrix应用)

上篇文章讲了matrix。
matrix是万能变换!
其对于css3变换来说,
其地位就相当于数组中的splice和reduce,就相当于正则中的replace方法。
因此需要重点掌握。
那篇文章里面提到了两个基本反射。
细想了一下,反射挺有意思的。
本文决定还是详细得说下反射!

什么是反射呢?百度吧。
大白话就是照镜子。

本文不手写数学推导了。都是一些easy的东西。
先说说那两个基本反射。

1.关于x轴反射。
设点(x0, y0)经过反射变换后,那么得到的点(x, y)
有关系
[quote]x = x0
y = -y0[/quote]
因此变换矩阵是
[quote]1 0
0 -1[/quote]
所以使用matrix(1,0,0,-1,0,0)。
测试如下:
html 代码

2.关于y轴反射
同理,其变换矩阵是:
[quote]-1 0
0 1[/quote]
测试效果如下:
html 代码

3.关于13象限对角线的反射
你也可以用上面的,思路来做,其变换矩阵是
[quote]0 1
1 0[/quote]
测试如下(注意css3中的坐标系中,x轴是向下的,13变成24了):
html 代码

其实此反射也可以通过基本反射和旋转来复合得到。
那么变换矩阵也可以通过相应的矩阵乘积得到。
关于13象限对角线的反射,我们可以先正旋转90deg,然后通过y轴反射得到。
html 代码

因为坐标系的原因,始终跟我们正常坐标系,差个正负。
那么我们把rotate(-90deg)写出其变换矩阵:
[quote]cos(-90) -sin(-90)
sin(-90) cos(-90)[/quote]
即:
[quote]0 1
-1 0[/quote]
于y轴反射矩阵:
[quote]-1 0
0 1[/quote]
相乘,也得到
[quote]0 1
1 0[/quote]
当然也有其他方式得到此矩阵。

4.关于24象限的对角线的反射
通过类似的推理其对应变换矩阵是:
[quote]0 -1
-1 0[/quote]
测试如下
html 代码

5.关于任何直线的反射呢??
呵呵,作为练习题。做出来就能理解得更深刻。动脑动手吧。
最后说句,反射变换矩阵有啥特点呢?行列式为-1。

练习题:上述例子中的图像宽度变成200px,使其按某一对角线反射(使用旋转和基本反射复合即可)

本文完。
《本系列文章目录》

» 本文来自:前端开发者 » 《【变换】CSS3变换之反射(matrix应用)》
» 本文链接地址:https://www.rokub.com/9427.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!