如何将旋转的 div 对齐到左上角或右上角？

如何将旋转元素与左上角或右上角对齐

将旋转元素放置在网页的特定角落可以是具有挑战性的。让我们检查一下您想要旋转包含文本的 div 并将其与左上角或右上角对齐的场景。

给定的 CSS 代码段包含一个粉红色背景的 div 和文本“Picture by Name.”。 ”变换属性将 div 旋转 90 度，根据所需的角位置将其沿页面的左边缘或右边缘垂直对齐。

要将旋转的 div 与左上角对齐，关键步骤是调整变换原点和平移值。通过将变换原点设置为左上角，旋转点将移动到该角。此外，translationX 值必须设置为 -100% 才能将元素移动到最左边缘。

这里是经过必要修改的修订版 CSS：

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

此代码确保旋转的 div 与页面的左上角对齐。通过相应地调整这些值，您还可以将元素对齐到右上角。

以上是如何将旋转的 div 对齐到左上角或右上角？的详细内容。更多信息请关注PHP中文网其他相关文章！