k=1的镜像对称，为什么结果显示的却是旋转了90度的效果？

老师的代码里设置了k=1的镜像对称，为什么结果显示的却是旋转了90度的效果？

老师代码：

盛大人 2020-04-04

源自：CSS3转换 5-2 矩阵实战

收起

1回答

好帮手慕糖 2020-04-04 19:36:22

同学你好，不是旋转的，虽然效果看起来差不多，是对称过去的。可以理解为我按照这个k这条线，对折下。

下图是老师画的一个图，比较简洁，同学可以参考理解：

蓝色是最开始的形状。红色是左边。黄色是k

绿色就是要对折的点，原来的位置与k做垂线，距离相等，得到的位置就是新的位置与原来对称的。

祝学习愉快~

收起回答

慕粉2031048644 #1

但是按照这个理解，课程讲的y=2x的情况，又和实际效果有出入了。我按照这个方法算完预想的位置和实际效果完全不一样

2022-10-31 23:25:40

好帮手慕久久回复慕粉2031048644 #2

同学你好，个人理解的和“慕糖”老师、讲师描述的不太一样，可以参考一下：

测试代码（建议将页面缩小至50%查看）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>matrix3d</title>
  <style type="text/css">
    div {
      width: 1500px;
      height: 250px;
      background: #abcdef;
      position: absolute;
      left: 300px;
      top: 900px;
    }

    div:nth-child(1)>img {
      transform: matrix(0,-1,-1,0,0,0)  
    }
 
  </style>
</head>
<body>
  <div><img src="images/sprite.jpg"></div>
  <div><img src="images/sprite.jpg"></div>
</body>
</html>

y=x 这条轴，对应的k是-1，此时得到的位移矩阵是transform: matrix(0,-1,-1,0,0,0) ，效果如下：