Question

我对使用transform绝对定位元素存在问题：rotate（）css。我已经阅读过类似问题的其他文章，并且使用了一些解决方案，但仍然不能解决我的问题。我尝试了transform-origin等。

我想将旋转的链接放置在任意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>

谢谢您的回复。

Answer 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>

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

1 个答案: