首页 > web前端 > css教程 > 如何旋转并将元素放置在左上角或右上角?

如何旋转并将元素放置在左上角或右上角?

Barbara Streisand
发布: 2024-11-10 19:13:02
原创
575 人浏览过

How to Rotate and Position an Element on the Top Left or Top Right Corner?

旋转元素并将其放置在左上角或右上角

旋转带有文本的 div 并将其放置在左上角角,可以使用以下代码:

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

这里,transform-origin属性设置为左上角,这使得旋转相对于左上角发生。 translateX(-100%) 平移将旋转后的元素向左移动其宽度的 100%。

要将元素与右边缘对齐,可以修改 translateX 值为正数,如 translateX (100%)。这会将旋转后的元素向右移动其宽度的 100%。

.credit {
  transform-origin: top right;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(100%);
}
登录后复制

以上是如何旋转并将元素放置在左上角或右上角?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板