为什么在使用 :hover 缩放其大小时字体真棒图标会旋转回原始位置？

Question

我正在我的网站上制作图片滑块。我的每一侧都有两个 FA 箭头图标。它们都旋转了 90 度以指向外。我还在每个上都有一个 :hover 伪 class 以在悬停时缩放大小。然而，虽然这会缩放大小，但它也会将箭头旋转回其开始的位置。这是为什么，我似乎找不到可靠的答案。

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
 ham.classList.add('ham-open');
 menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
 ham.classList.remove('ham-open');
 menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();;

sr.reveal('.info', {
 duration: 2000,
 origin: 'bottom';
})

html, body {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.header {
 background: url(img/mex-9.jpg);
 width: 100vw;
 height: 100vh;
 background-size: cover;
 background-attachment: fixed;
 background-position: center;
 display: flex;
}

.nav-wrap {
 flex-basis: 40%;
}

.nav-wrap i {
 color: white;
 font-size: 2rem;
 position: absolute;
 right: -33px;
 top: 0px;
 transition: all .1s ease;
}

.nav-wrap i:hover {
 cursor: pointer;
 transform: scale(1.15);
}

.nav-box {
 margin-left: 50px;
 margin-top: 100px;
 max-width: 70px;
 cursor: pointer;
 position: fixed;
}

.b1, .b2, .b3 {
 width: 70px;
 height: 8.5px;
 border-radius: 5px;
 background-color: #fff;
 margin-bottom: 10px;
 transition: all .25s ease;
}

.b1 {
 background-color: #56ff47;
}

.b3 {
 background-color: #ff4c4c;
}

.ham-open .b1 {
 background-color: #56ff47;
 transform: translateY(100px);
 position: relative;
 z-index: 1;
}

.ham-open .b2 {
 transform: translateY(81.5px);
 width: 110px;
 position: relative;
 left: 60px;
 z-index: 0;
}

.ham-open .b3 {
 background-color: #ff4c4c;
 transform: translateY(63px);
 width: 140px;
 position: relative;
 left: 160px;
 z-index: 2;
}

.menu {
 display: flex;
 border-left: 8px solid #56ff47;
 flex-direction: column;
 background-color: #fff;
 margin-left: -700px;
 width: 292px;
 padding-top: 10px;
 padding-bottom: 10px;
 position: fixed;
 border-radius: 5px;
 top: 225px;
 transition: all .25s;
}

.menu a {
 text-decoration: none;
 color: limegreen;
 font-family: 'Kumar One Outline';
 font-size: 2.3rem;
 text-align: center;
 margin-top: 12px;
 margin-bottom: 12px;
 transition: all .5s ease;
}

a:hover {
 color: #007001;
}

.info-wrap {
 flex-basis: 60%;
}

.info {
 font-family: 'Cedarville Cursive';
 color: white;
 font-weight: bold;
 font-size: 4.5rem;
 text-align: center;
 margin-top: 60px;
}

.logo-wrap {
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.logo-wrap div {
 font-family: 'Staatliches';
 color: white;
 font-size: 13rem;
 font-weight: bold;
 letter-spacing: 10px;
 margin-bottom: -5rem;
 position: relative;
 margin-left: auto;
 margin-right: auto;

}



/*------ABOUT------*/



.about-section {
 background-color: #35ad37;
}

.about-section h1 {
 text-align: center;
 font-size: 4.5rem;
 margin-top: 0;
 margin-bottom: 30px;
 padding-top: 15px;
 color: white;
 font-family: 'Cedarville Cursive';
 font-weight: bold;
}

.about-wrap {
 display: flex;
 padding-bottom: 80px;
}

.about-info, .image-slider-wrap {
 flex-basis: 50%;
}

.about-info p {
 color: white;
 font-family: 'Josefin Sans';
 font-size: 2rem;
 margin-left: 100px;
 margin-bottom: 0;
 margin-top: 0;
}

.image-slider {
 width: 650px;
 height: 400px;
 background-color: red;
 border-radius: 13px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
}

.image-slider i {
 color: white;
 font-size: 5rem;
 position: absolute;
 top: 50%;
 margin-top: -40px;
 transition: all .1s ease;
 cursor: pointer;
}

#left {
 transform: rotate(-90deg);
 left: -30px;
}

#right {
 transform: rotate(90deg);
 right: -30px;
}

#left:hover {
 transform: rotate(-90deg);
 transform: scale(1.3);
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Mexican Restaurant</title>
 <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
  <div class="header">
   <div class="nav-wrap">
    <div class="nav-box">
     <div class="b1"></div>
     <div class="b2"></div>
     <div class="b3"></div>
    </div>

    <div class="menu">
     <a href="#">Home</a>
     <a href="#">About</a>
     <a href="#">Menu</a>
     <a href="#">Contact</a>
     <a href="#">Location</a>
     <i class="fas fa-times" id="menu-close"></i>
    </div>
   </div>
   <div class="info-wrap">
    <p class="info">Authentic Mexican Food</p>

    <div class="logo-wrap">
     <div>YOUR</div>
     <div>LOGO</div>
     <div>HERE</div>
    </div>
   </div>
  </div>
 </header>
 <main>
  <div class="about-section"> 
   <h1 class="about-h1">About Us</h1>

   <div class="about-wrap">
    <div class="about-info">
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
    </div>

    <div class="image-slider-wrap"> 
     <div class="image-slider">
      <i class="fas fa-sort-up" id="left"></i>
      <i class="fas fa-sort-up" id="right"></i>
     </div>
    </div>
   </div>
  </div>
 </main>
 <footer>
  
 </footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>

Answer 1

你必须把两个 transform 参数放在一个 line/rule 中，像这样：

transform: rotate(-90deg) scale(1.3);

否则它们作为两个规则，其中第二个规则覆盖第一个。

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
 ham.classList.add('ham-open');
 menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
 ham.classList.remove('ham-open');
 menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();;

sr.reveal('.info', {
 duration: 2000,
 origin: 'bottom';
})

html, body {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.header {
 background: url(img/mex-9.jpg);
 width: 100vw;
 height: 100vh;
 background-size: cover;
 background-attachment: fixed;
 background-position: center;
 display: flex;
}

.nav-wrap {
 flex-basis: 40%;
}

.nav-wrap i {
 color: white;
 font-size: 2rem;
 position: absolute;
 right: -33px;
 top: 0px;
 transition: all .1s ease;
}

.nav-wrap i:hover {
 cursor: pointer;
 transform: scale(1.15);
}

.nav-box {
 margin-left: 50px;
 margin-top: 100px;
 max-width: 70px;
 cursor: pointer;
 position: fixed;
}

.b1, .b2, .b3 {
 width: 70px;
 height: 8.5px;
 border-radius: 5px;
 background-color: #fff;
 margin-bottom: 10px;
 transition: all .25s ease;
}

.b1 {
 background-color: #56ff47;
}

.b3 {
 background-color: #ff4c4c;
}

.ham-open .b1 {
 background-color: #56ff47;
 transform: translateY(100px);
 position: relative;
 z-index: 1;
}

.ham-open .b2 {
 transform: translateY(81.5px);
 width: 110px;
 position: relative;
 left: 60px;
 z-index: 0;
}

.ham-open .b3 {
 background-color: #ff4c4c;
 transform: translateY(63px);
 width: 140px;
 position: relative;
 left: 160px;
 z-index: 2;
}

.menu {
 display: flex;
 border-left: 8px solid #56ff47;
 flex-direction: column;
 background-color: #fff;
 margin-left: -700px;
 width: 292px;
 padding-top: 10px;
 padding-bottom: 10px;
 position: fixed;
 border-radius: 5px;
 top: 225px;
 transition: all .25s;
}

.menu a {
 text-decoration: none;
 color: limegreen;
 font-family: 'Kumar One Outline';
 font-size: 2.3rem;
 text-align: center;
 margin-top: 12px;
 margin-bottom: 12px;
 transition: all .5s ease;
}

a:hover {
 color: #007001;
}

.info-wrap {
 flex-basis: 60%;
}

.info {
 font-family: 'Cedarville Cursive';
 color: white;
 font-weight: bold;
 font-size: 4.5rem;
 text-align: center;
 margin-top: 60px;
}

.logo-wrap {
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.logo-wrap div {
 font-family: 'Staatliches';
 color: white;
 font-size: 13rem;
 font-weight: bold;
 letter-spacing: 10px;
 margin-bottom: -5rem;
 position: relative;
 margin-left: auto;
 margin-right: auto;

}



/*------ABOUT------*/



.about-section {
 background-color: #35ad37;
}

.about-section h1 {
 text-align: center;
 font-size: 4.5rem;
 margin-top: 0;
 margin-bottom: 30px;
 padding-top: 15px;
 color: white;
 font-family: 'Cedarville Cursive';
 font-weight: bold;
}

.about-wrap {
 display: flex;
 padding-bottom: 80px;
}

.about-info, .image-slider-wrap {
 flex-basis: 50%;
}

.about-info p {
 color: white;
 font-family: 'Josefin Sans';
 font-size: 2rem;
 margin-left: 100px;
 margin-bottom: 0;
 margin-top: 0;
}

.image-slider {
 width: 650px;
 height: 400px;
 background-color: red;
 border-radius: 13px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
}

.image-slider i {
 color: white;
 font-size: 5rem;
 position: absolute;
 top: 50%;
 margin-top: -40px;
 transition: all .1s ease;
 cursor: pointer;
}

#left {
 transform: rotate(-90deg);
 left: -30px;
}

#right {
 transform: rotate(90deg);
 right: -30px;
}

#left:hover {
 transform: rotate(-90deg) scale(1.3);
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Mexican Restaurant</title>
 <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
  <div class="header">
   <div class="nav-wrap">
    <div class="nav-box">
     <div class="b1"></div>
     <div class="b2"></div>
     <div class="b3"></div>
    </div>

    <div class="menu">
     <a href="#">Home</a>
     <a href="#">About</a>
     <a href="#">Menu</a>
     <a href="#">Contact</a>
     <a href="#">Location</a>
     <i class="fas fa-times" id="menu-close"></i>
    </div>
   </div>
   <div class="info-wrap">
    <p class="info">Authentic Mexican Food</p>

    <div class="logo-wrap">
     <div>YOUR</div>
     <div>LOGO</div>
     <div>HERE</div>
    </div>
   </div>
  </div>
 </header>
 <main>
  <div class="about-section"> 
   <h1 class="about-h1">About Us</h1>

   <div class="about-wrap">
    <div class="about-info">
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
    </div>

    <div class="image-slider-wrap"> 
     <div class="image-slider">
      <i class="fas fa-sort-up" id="left"></i>
      <i class="fas fa-sort-up" id="right"></i>
     </div>
    </div>
   </div>
  </div>
 </main>
 <footer>
  
 </footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>

为什么在使用 :hover 缩放其大小时字体真棒图标会旋转回原始位置？

Why does font awesome icon rotate back to original position when using :hover to scale its size?

css

css-transforms

font-awesome