在 CSS 中的 matrix() 之后保持 div 的位置

Question

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>

如您所见，我正在使用 matrix() css 函数来尝试缩放我的文本。

这是我的默认值：matrix(1, 0, 0, 1, 0, 0); 这就是我得到的结果。

一旦我用 matrix(1, 0, 0, 0.5, 0, 0); 编辑了第 4 个值，我得到了这个结果，文本突然变低了。

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

Answer 1

Matrix() 6 个值的方法，最后一个参数是您必须修改才能修复的参数。

关于 matrix() 的更多信息：

Link-1

Link-2

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

#div2 {
  background: green;
  transform: matrix(1, 0, 0, 0.5, 0, -40);
}

<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>

Answer 2

我找到了解决方案

这解决了问题

transform-origin: left top;

在 CSS 中的 matrix() 之后保持 div 的位置

Maintaining the position of div after matrix() in CSS

css

css-position