旋转后的CSS绝对定位元素不能很好地对齐[重复]答案

【问题标题】：CSS absolute positioned element after rotate doesn't align well [duplicate]旋转后的CSS绝对定位元素不能很好地对齐[重复]
【发布时间】：2021-01-25 10:06:39
【问题描述】：

问题是绝对定位线在旋转 -90 度后未与边框对齐。我首先认为问题可能出在 transform-origin 属性上，但我尝试了几个选项，但都没有解决问题。

这是我写的代码：

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.square::after,
.square::before {
  position: absolute;
  content: "";
  top: 50%;
  height: 10px;
  width: 100%;
  background: #0D8C5D;
  transform: translateY(-50%);
}

.square::after {
  transform: rotate(-90deg);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-square.css">
  <title>Document</title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

这是因为transform。第二个.square::after 两者都需要，否则translateY(-50%) 将被覆盖。

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.square::after,
.square::before {
  position: absolute;
  content: "";
  top: 50%;
  height: 10px;
  width: 100%;
  background: #0D8C5D;
  transform: translateY(-50%);
}

.square::after {
  transform: translateY(-50%) rotate(-90deg);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-square.css">
  <title>Document</title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

【讨论】：

【解决方案2】：

CSS 级联规则，通常基于它们的具体程度以及它们在 CSS 文件中的位置。如果规则位于底部，则如有必要，它将覆盖顶部的规则。这意味着:after 选择器将覆盖上面的选择器。

^{顺便说一句，CSS 代表 Cascading 样式表 :)}

您可以在一行中为 transform 指定多个规则，例如 transform: translateY(-50%) rotate(-90deg);，以便您可以使用它

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.square {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.square::after,
.square::before {
  position: absolute;
  content: "";
  top: 50%;
  height: 10px;
  width: 100%;
  background: #0D8C5D;
  transform: translateY(-50%);
}

.square::after {
  transform: translateY(-50%) rotate(-90deg);
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn-square.css">
  <title>Document</title>
</head>
<body>
  <div class="square"></div>
</body>
</html>

【讨论】：