在 CSS 中根据视口设置元素的变换原点

问题描述 投票：0回答：1

我有许多元素以各种方式自动放置在页面周围。我希望能够单独变换它们中的每一个（不使用共享父级），变换中心位于视口的中心。默认的变换原点是元素的中心，似乎任何设置的值都是相对于其左上角的。

这是一个示例情况：

<body>
    <p>paragraph1</p>
    <p>paragraph2</p>
    <p>paragraph3</p>
</body>

p {
    transform-origin: 50vw 50vh;
}
p.transform {
    transform: scale(2);
}

设置 

transform-origin: 50vw 50vh
只会为视口左上角的元素提供所需的效果。 CSS 不允许基于计算样式进行计算，例如元素的 
top
和 
left
。 
transform-box
仅具有与元素本身相关的选项。我无法将每个元素放在一个大小适合视口的父元素中，因为其中许多元素会影响彼此的位置，其他元素位于弹性盒中，等等。

我确信这在 javascript 中很容易，但令我惊讶的是，这种相对简单的事情无法在纯 CSS 中完成。

html css css-transforms viewport-units
1个回答
0
投票

变换是相对于元素的，但绝对定位是相对于视口的。

:root {
  --size: 50px;
}

img {
  width: var(--size);
  position: absolute;
  border: 3px solid lime;
  transform: translate(-50%, -50%);
}

.i1 {
  left: 10%;
  top: 10%;
}

.i2 {
  left: 90%;
  top: 10%;
}

.i3 {
  left: 50%;
  top: 50%;
}

.i4 {
  left: 10%;
  top: 90%;
}

.i5 {
  left: 90%;
  top: 90%;
}

.i6 {
  left: 0%;
  top: 0%;
}

.i7 {
  left: 100%;
  top: 0%;
}

.i8 {
  left: 100%;
  top: 100%;
}

.i9 {
  left: 0%;
  top: 100%;
}
<img class="i1" src="https://picsum.photos/id/354/100">
<img class="i2" src="https://picsum.photos/id/355/100">
<img class="i3" src="https://picsum.photos/id/356/100">
<img class="i4" src="https://picsum.photos/id/357/100">
<img class="i5" src="https://picsum.photos/id/358/100">
<img class="i6" src="https://picsum.photos/id/360/100">
<img class="i7" src="https://picsum.photos/id/361/100">
<img class="i8" src="https://picsum.photos/id/362/100">
<img class="i9" src="https://picsum.photos/id/363/100">

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.