我有一個我很滿意的按鈕，它的影片效果很好。但是，我希望將其旋轉 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>問題是當懸停時，按鈕會向右移動一點。感謝您的任何幫助！
uj5u.com熱心網友回復：
我發現導致這種視覺錯誤的是變換原點的設定方式。
在這種情況下，您可以設定 a 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>uj5u.com熱心網友回復：
它正在發生變化，因為您"word-spacing: 10px"使按鈕翻譯以包含字母的新大小
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462532.html