按钮侧身锚

Question

我有一个非常满意的按钮，它的动画效果很好。但是，我希望将它旋转 90 度以使其面朝下。我用了transform: rotate(90deg);。然而，这有点歪斜它并且按钮在悬停时向右移动。谁能帮忙？这是我的代码：

button{
  transform: rotate(90deg);
  padding: 15px 10px;
  border: 2px solid red;
  border-radius: 5px;
  background-color: white;

  
  word-spacing: 1px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
}

button:hover{
  background-color: red;
  color: white;
  word-spacing: 10px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="button.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button>More →</button>
  <script src="script.js"></script>
</body>

</html>

问题是悬停时，按钮向右移动了一点。感谢您的帮助！

Answer 1

它正在改变，因为你的 "word-spacing: 10px" 使按钮平移以包含新的字母大小

Answer 2

我发现导致这种视觉错误的是变换原点的设置方式。

在这种情况下，你可以设置一个transform-origin: left，这样就可以正确变换了。看一看：

button {
  transform: rotate(90deg);
  padding: 15px 10px;
  border: 2px solid red;
  border-radius: 5px;
  background-color: white;
  transform-origin: left;
  word-spacing: 1px;
  margin-left: 50px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
}

button:hover{
  background-color: red;
  color: white;
  word-spacing: 10px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="button.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button>More →</button>
  <script src="script.js"></script>
</body>

</html>

按钮侧身锚

button turn sideways anchor

html

css

rotation

button