闲来无事，准备发个段子。于是，打开[头条号]，当鼠标放在缩略图上时，有放大镜的效果，并且刚好项目上要用到这个，于是怀着好奇心：难道是用CSS3的scale来实现的？ F12一看，有了新的发现：
F12
放大来看
F12放大
对，就是这个属性transform: matrix(1.04, 0, 0, 1.04, 0, 0);
原来是 矩阵，有点意思...百度一下，有位张大兄弟的博客（http://www.zhangxinxu.com/wordpress/?p=2427）中详细介绍了ta,下面是摘抄过来的：
transform:matrix(a,b,c,d,e,f);
吓住了吧，这多参数，一个巴掌都数不过来。好吧，如果你把a-f,这6个参数想象成女神的名词，你会觉得，世界不过如此嘛~~实际上，这6参数，对应的矩阵就是：
参数矩阵
注意书写方向是 竖着的。
上面提过，矩阵可以想象成古代的士兵方阵，要让其发生变化，只有与另外一个士兵阵火拼就可以了，即使这是个小阵。
反应在这里就是如下转换公式：
矩阵转换
那ax+cy+e的意义是什么？
记住了，ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
又迷糊了？不急，一个简单例子就明白了。
假设矩阵参数如下：
transform:matrix(1,0,0,1,30,30);/* a=1, b=0, c=0, d=1, e=30, f=30 */
现在，我们根据这个矩阵偏移元素的中心点，假设是(0, 0)，即x=0, y=0。
于是，变换后的
x坐标就是 ax+cy+e = 1*0+0*0+30 =30.
y坐标就是 bx+dy+f = 0*0+1*0+30 =30
于是，中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图，好好想象下，原来(0,0)的位置，移到了白点的(30, 30)处，怎么样，是不是往右下方同时偏移了30像素哈！
gifx效果图
怎么样，上面那位大兄弟解释的详细吧 _____
头条号中完整放大镜效果，是下面这段代码CSS:
img {
width: 100%;
min-height: 100%;
-webkit-transition: all .5s ease-out .1s;
-moz-transition: all .5s ease-out .1s;
transition: all .5s ease-out .1s;
}
img:hover {
-webkit-transform: matrix(1.04,0,0,1.04,0,0);
-moz-transform: matrix(1.04,0,0,1.04,0,0);
-ms-transform: matrix(1.04,0,0,1.04,0,0);
transform: matrix(1.04,0,0,1.04,0,0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
网友评论