css scale设置缩放中心点

CSS `scale()` 函数用于缩放元素的大小，它接受一个或两个参数。如果你想指定缩放的中心点，可以使用 `transform-origin` 属性，这个属性控制了变换（包括缩放）的起始位置。

`transform-origin` 的值可以是一个百分比、长度值、'center'（默认值）、'left', 'right', 'top', 'bottom', '50%' 等，分别表示元素的哪一侧作为缩放的基准。例如：

transform: scale(x, y);
transform-origin: left top; /* 缩放中心点设在左上角 */

如果你只提供一个参数给 `scale()`，那么缩放比例将在水平和垂直方向上是一致的，并且中心点通常默认为元素的中心。

如果想通过 JavaScript 动态改变缩放中心点，你可以先计算出元素的原点坐标，然后应用到 `transform-origin`：

const element = document.getElementById('your-element');
element.style.transformOrigin = `${element.offsetWidth / 2}px ${element.offsetHeight / 2}px`;

这将会将缩放中心点设置为元素宽度和高度的一半，即元素的几何中心。

相关问题

Svg 动画 transform scale 中心缩放

要实现 SVG 动画中心缩放的效果，可以通过以下步骤来操作：

1. 首先，将 SVG 元素进行定位，使其位于页面居中位置。可以使用 CSS 中的“position”属性和“transform”属性来实现。

2. 然后，使用 SVG 动画中的“animateTransform”元素来实现缩放动画。通过设置“attributeName”属性为“transform”，“attributeType”属性为“XML”，“type”属性为“scale”，“from”属性为“1”，“to”属性为所需缩放的值，以及“begin”和“dur”属性来控制动画的起始时间和持续时间。

3. 最后，通过设置“transform-origin”属性来指定缩放的中心点。可以将其设置为“50% 50%”，即 SVG 元素的中心点。

下面是一个示例代码，可以参考一下：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="scale"
                      from="1"
                      to="0.5"
                      begin="0s"
                      dur="1s" />
  </rect>
</svg>

在上面的代码中，矩形元素被定位于 SVG 元素的中心位置，并且设置了一个缩放动画，持续时间为 1 秒。缩放的中心点被设置为矩形元素的中心点。

css -webkit-transform 基于中心缩放

CSS中的-webkit-transform属性可以用于对元素进行旋转、缩放、平移和倾斜等变换效果。其中，基于中心缩放是一种常见的变换效果。

对于基于中心缩放，我们可以使用scale函数来实现。scale函数可以指定元素在水平方向和垂直方向进行缩放的比例，且默认以元素中心为中心点进行缩放。

例如，如果我们要将一个元素在水平方向缩小一半，可以使用如下的CSS样式：

.element {
  -webkit-transform: scale(0.5, 1);
}

这样，元素将以其中心为基准，水平方向上缩小到原来的一半。如果想要在垂直方向上缩小一半，可以将scale函数的第二个参数改为0.5。

值得注意的是，CSS中的-webkit-transform属性在某些浏览器中需要添加前缀-webkit-以实现最佳的兼容性。所以我们通常会写成-webkit-transform来使用。另外，还有其他的前缀用于不同的浏览器，如-moz-、-o-等。

总之，通过使用-webkit-transform属性的scale函数，我们可以实现元素的基于中心的缩放效果。这在实现一些动画效果或响应式布局中经常会用到。