主页 / 问题 / 1212037
Accepted
Izzei -
Asked:2021-12-01 02:01:39 +0000 UTC2021-12-01 02:01:39 +0000 UTC

使用变换时如何使元素对齐到左上边缘：缩放？

  • 772

元素的初始位置：

元素初始排列示例

应用变换后的放置：缩放

在此处输入图像描述

如您所见，元素发生了变化。如何防止这种情况？如何在不改变位置的情况下调整元素的大小？

html

1 个回答

  1. Best Answer

    您可以指定转换点：transform-origin

    *,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.block {
  display: block;
  max-width: 300px;
  cursor: pointer;
}

.block__content {
  background-color: red;
  transition: transform 0.2s linear;
  transform-origin: left top;
}

.block:hover .block__content {
  transform: scale(0.3);
}
    <div class="block">
  <div class="block__content">
  Контент Контент Контент Контент Контент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент
  КонтентКонтент КонтентКонтент КонтентКонтент Контент
  </div>
</div>

    • 3

相关问题