在CSS中保持div在矩阵（）之后的位置

如何在matrix（）函数之后保持div的位置

下面是我的代码

<style>

    #div1{
      background: red; 
      width: 150px; 
      height: 150px;
    }

    #div2{
      background: green; 
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
 </style>


<div id="div1">
  <div id="div2">Lorem Ipsum es un texto de marcador de posición comúnmente utilizado en las industrias gráficas, gráficas y editoriales para previsualizar diseños y maquetas visuales.</div>
<div>

#第一组{
背景：红色；
宽度：150px；
高度：150像素；
}
#第二组{
背景：绿色；
变换：矩阵（1,0,0,1,0,0）；
}
Lorem Ipsum是一本关于工业gráficas、gráficas和社论中关于视觉疾病和视觉问题的著作。

如您所见，我正在使用matrix（）css函数来尝试缩放文本

这是我的默认值：

矩阵（1,0,0,1,0,0）
这就是我得到的结果


有一次我用
矩阵编辑了第四个值（1,0,0,0.5,0,0），我得到这个结果，文本突然变低。

我的目标是保持文本在顶部的位置：

Matrix（）
6个值的方法，最后一个参数是您必须修改的，以获得固定值

有关矩阵（）的详细信息：




#第1部分{
背景：红色；
宽度：150px；
高度：150像素；
}
#第二组{
背景：绿色；
变换：矩阵（1,0,0,0.5,0，-40）；
}

Lorem Ipsum是一本关于工业gráficas、gráficas和社论中关于视觉疾病和视觉问题的著作。
我找到了一个解决方案

这就解决了问题

transform-origin: left top;

第四个值和第六个值之间的关系。我希望它更具响应性，如果我输入不同长度的文本，我将不断地改变它。我希望用户放置他们自己的文本，我希望保持它的位置和2D元素，比如如果你有一个矩阵数组类似于这个矩阵（1，2，3，4，5，6）=那么它将有3列，数字将是1和2，3和4，以及5和6，不幸的是我不能在这里添加内容，不过，我可以在答案中添加链接以供参考。我的意思是，你是如何得出-40作为一个值的？如果我把第四个值改成0.6，第六个参数的值是多少？比如这两个值之间的公式是什么来保持其顶部的位置？你用javascript解释它我不知道mind@PhilGreene我添加了几个URL，可能会给您一些输入，我强烈建议您在实现任何功能之前先检查一下这些功能。@Phillgreen如果您检查w3schools的第二个URL，它将根据更改的数字清晰地显示内容的行为。当我们讨论2D元素时，在我们的例子中，它有4条边和2条边，因此在你的例子中，4条边是正确的，但边（顶部）不是正确的，因此能够处理数字以获得输出。