F12头条号,发现了一个CSS

闲来无事，准备发个段子。于是，打开[头条号]，当鼠标放在缩略图上时，有放大镜的效果，并且刚好项目上要用到这个，于是怀着好奇心：难道是用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;

}