我已经设置了一个练习用的着陆页，其中插入了一个h1 +一个段落，然后慢慢出现一个“阅读更多”按钮。我还进行了设置，以便将鼠标悬停在“更多”按钮上时，它会在y轴上旋转180度。但是，我的问题是，当我将鼠标悬停在上方时，左边框消失了。这是发生这种情况时的样子：
因为我在Y轴上旋转了文本，所以文本被翻转了，但是左边的边框（实际上是因为翻转了而实际上是右边）消失了。关于为什么的任何想法？这是我的代码：
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: white;
line-height: 1.6;
text-align: center;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase {
height: 300px;
}
#showcase h1 {
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes heading {
0% {top: -50px;}
100% {top: 200px}
}
#content {
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes content {
0% {right: 100%;}
100% {right: 0;}
}
.btn {
display: inline-block;
text-decoration: none;
padding: 1rem 2rem;
border: white 1px solid;
margin-top: 40px;
color: white;
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
@keyframes btn {
0% {opacity: 0;}
100% {opacity: 1;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="landing.css">
<title>Landing Page</title>
</head>
<body>
<header id="showcase">
<h1>Welcome To My Site</h1>
</header>
<div id="content" class="container">
<p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
</div>
<a href="#" class="btn">Read More</a>
</body>
</html>
我是Web设计的新手，因此解决方案可能很明显。但是，我只是不知道为什么会这样。请帮忙！
谢谢，
莱夫
最佳答案
我认为“悬停”时发生的问题是类btn上的css行：
.btn {
padding: 1rem 2rem;
}
我还注意到，在我在https://codepen.io中对其进行测试之前，您的代码段似乎还可以。您指的是问题的左边界，对我们来说似乎是边界的底部。
我在您的代码之前做了一些更改：
您可以访问此pen并播放代码。
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: white;
line-height: 1.6;
text-align: center;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase {
height: 300px;
}
#showcase h1 {
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes heading {
0% {top: -50px;}
100% {top: 200px}
}
#content {
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes content {
0% {right: 100%;}
100% {right: 0;}
}
span {
padding: 1rem 2rem;
}
.btn {
width: auto;
height: 60px;
line-height: 60px;
display: inline-block;
text-decoration: none;
/* padding: 1rem 2rem; */
border: white 1px solid;
margin-top: 40px;
color: white;
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
@keyframes btn {
0% {opacity: 0;}
100% {opacity: 1;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="landing.css">
<title>Landing Page</title>
</head>
<body>
<header id="showcase">
<h1>Welcome To My Site</h1>
</header>
<div id="content" class="container">
<p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
</div>
<a href="#" class="btn">
<span>Read More</span>
</a>
</body>
</html>关于html - CSS过渡使左边框消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50867182/