如何使用 CSS 实现只旋转边框而不旋转图标

Question

我想在悬停时将我的边框旋转 135 度，但图标也会旋转，我只想要边框，我 post 如果你能帮助我，我将不胜感激，谢谢！

 My html: `
    <div class="container-fluid details-section">
      <div class="row justify-content-center h-100">
       <div class="col-xl-2 my-auto box text-center">
          <i class="fa fa-guitar"></i>
      </div>
       <div class="col-xl-2 my-auto box text-center">
          <i class="fa fa-guitar"></i>
       </div>
       <div class="col-xl-2 my-auto box text-center">
          <i class="fa fa-guitar"></i>
       </div>
      </div>
    </div>`

    And CSS: 
    
        `.details-section{
          background-color: rgb(83, 83, 83);
          height: 200px;
        }
        
        
        .box i{
          font-size: 70px;
          border: 2px solid #c49b63;
          color: black;
        }
    .box:hover i{
      transform: rotate(135deg);
    }
    `

Answer 1

这是一个反向选项 transform。我更新了 HTML 以旋转内部元素而不是 .box 本身以将 bootstrap 元素与旋转元素分开。

.details-section {
  background-color: rgb(83, 83, 83);
  height: 200px;
}

.icon-container {
  border: 2px solid #c49b63;
  transition: 0.5s linear;
}

.box i {
  font-size: 70px;
  color: black;
  transition: 0.5s linear;
}

.icon-container:hover {
  transform: rotate(135deg);
}

.icon-container:hover i {
  transform: rotate(-135deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<div class="container-fluid details-section">
  <div class="row justify-content-center h-100">
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
  </div>
</div>

如何使用 CSS 实现只旋转边框而不旋转图标

How to achieve rotating only border and not the icon using CSS

html

javascript

css

bootstrap-4