html - 在左边缘放置一个垂直的 Bootstrap 按钮

Question

我想在屏幕的左边缘放置一个垂直的 Bootstrap 按钮。现在我有这个 CSS:

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 20% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>

问题是它不是一直在左边；如果它没有旋转，那将会是这样，但由于它是旋转的，所以存在空间间隙。我该如何解决这个问题？

Answer 1

将 transform-origin: bottom left; 添加到您的按钮

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 20% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform-origin: bottom left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>

希望这有帮助:)

To learn more about transform-origin property, visit https://www.w3schools.com/cssref/css3_pr_transform-origin.asp