底部的CSS旋转元素没有高度和宽度答案

【问题标题】：CSS rotated element at bottom without height and width底部的CSS旋转元素没有高度和宽度
【发布时间】：2018-09-23 08:20:49
【问题描述】：

我在使用 transform:rotate() css 绝对定位元素时遇到问题。我已经阅读了关于类似问题的其他帖子，我使用了一些解决方案，但仍然没有解决我的问题。我尝试了变换原点等。

我想将我的旋转链接放置在任意 X 位置：左、中、右和 Y：标题的底部。我需要不知道元素宽度、高度（不同文本）的解决方案。

我认为我有 90% 的解决方案，但问题是我的链接没有放在我想要的位置。 X 位置随文本长度而变化。

我在下面有一个工作代码：

<!doctype html>
<html lang="pl">
<head>    
  <meta charset="utf-8">    
  <style>
  body {
    background: #333333;
    font-family: Arial, sans-serif;
  }
  
  .header-content {
    background: #cccccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 712px;
    margin: 0 auto;			
    padding: 0 45px;
    position: relative;
    width: 1200px;
  }
  
  .link-decor {
    border-top: 2px solid #ed217c;
    color: #ffffff;			
    font-size: 14px;			
    position: absolute;
    bottom: 0;
    left: 50%;
    padding-left: 30px;			
    transform: rotate(-90deg) translate(50%, -100%);		
    transform-origin: bottom;
  }
  </style>
</head>
<body>
  
  <div class="header-content">
    <div>
      <h1>LOREM<br>IPSUM</h1>
      <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
      <a href="#">learn more</a>
    </div>
    <a href="#" class="link-decor">webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss</a>
  </div>        
  
</body>
</html>

感谢您的回复。

【问题讨论】：

标签： html css rotation

【解决方案1】：

我把你的 HTML 改成这样：

<div class="header-content">
<div class="in-header"> <!-- add class in-header here -->
  <h1>LOREM<br>IPSUM</h1>
  <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
  <a href="#">learn more</a>
  <a href="#" class="link-decor">webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss</a>
</div>

我将类添加到div.header-content 的第一个子元素，并将您要旋转的元素放在此 div 内，而不是像您所做的那样放在它之外。

然后，我将 .link-decor 的样式更改为

.link-decor {
    border-top: 2px solid #ed217c;
    color: #ffffff;
    font-size: 14px;
    position: absolute;
    top: 100%;
    left: 0px;
    padding-left: 30px;
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
}

并添加了相对于新类.in-header的位置

body {
    background: #333333;
    font-family: Arial, sans-serif;
  }
  
  .header-content {
    background: #cccccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 712px;
    margin: 0 auto;			
    padding: 0 45px;
    position: relative;
    width: 1200px;
  }
  .in-header{
    position: relative;
  }
  
  .link-decor {
    border-top: 2px solid #ed217c;
    color: #ffffff;
    font-size: 14px;
    position: absolute;
    top: 100%;
    left: 0px;
    padding-left: 30px;
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
  }

<!doctype html>
<html lang="pl">
<head>    
  <meta charset="utf-8">    
</head>
<body>
  
  <div class="header-content">
    <div class="in-header">
      <h1>LOREM<br>IPSUM</h1>
      <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
      <a href="#">learn more</a>
      <a href="#" class="link-decor">webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss</a>
    </div>
  </div>        
  
</body>
</html>

【讨论】：