CSS 中的变换旋转不应影响我的跨度和段落标记

Question

我的片段：

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

.icon-container{
  border: 2px solid #c49b63;
  width: 90px;
  height: 90px;
  transition: 0.5s ease;
  
}

.box i{
  font-size: 60px;
  color: black;
  margin-top: 13px;
  transition: 0.5s ease;
}

.icon-container:hover{
  transform: rotate(135deg);
  background-color: #c49b63;
}

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

.counter-box {
  display: block;
  text-align: center
}
.counter {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #666;
  line-height: 28px
}

.counter-box p {
  margin: 5px 0 0;
  padding: 0;
  color: #909090;
  font-size: 18px;
  font-weight: 500
}

<div class="container-fluid details-section">
  <div class="row justify-content-center h-100">
   <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-thumbs-o-up"></i>
       <div class="counter-box">
         <span class="counter">3275</span>
          <p>Registered Members</p>
        </div>
      </div>
  </div>
  <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-check"></i>
      </div>
  </div>
  <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-shopping-cart"></i>
      </div>
  </div>
  </div>
</div>

正如您在代码片段中看到的那样，当我将鼠标悬停在边框或图标上时，它会旋转边框和图标，还会旋转跨度和段落标签，我希望不影响我的旋转过渡影响我的计数器框 div。我希望我的计数器div稳定，如果你能帮助我，我将不胜感激，谢谢。

Answer 1

您可以在包装器元素中使用 pseudo-class ::after 来设置要在元素上显示的样式，然后使其在悬停时旋转，如下所示：

.wrapper {
  position: relative;
}

.wrapper::after {
  content: "";
  position: absolute;
  border: 10px solid crimson;
  width: 500px;
  height: 500px;
}

.wrapper:hover::after {
  transform: rotate(-180deg);
  transition: .3s;
}

.sample {
  position: absolute;
  width: 500px;
  height: 500px;
  z-index: 1;
}

<div className="wrapper">
  <div className="sample">
    <p>some content</p>
  </div>
</div>

Answer 2

我修改了一些css代码，请查看

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

.icon-container{
    width: 90px;
    height: 90px;
    position: relative;
  
}
.icon-container:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: 0.5s ease;
    border: 2px solid #c49b63;
    }
.icon-container:hover:before {
    transform: rotate(135deg);
    background: #c49b63;
 }

.box i{
  font-size: 60px;
  color: black;
  margin-top: 13px;
  position: relative;
  /* transition: 0.5s ease; */
}

/* .icon-container:hover{
  transform: rotate(135deg);
  background-color: #c49b63;
} */

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

.counter-box {
  display: block;
  text-align: center;
  position:relative;
}
.counter {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #666;
  line-height: 28px
}

.counter-box p {
  margin: 5px 0 0;
  padding: 0;
  color: #909090;
  font-size: 18px;
  font-weight: 500
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid details-section">
  <div class="row justify-content-center h-100">
   <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-thumbs-o-up"></i>
       <div class="counter-box">
         <span class="counter">3275</span>
          <p>Registered Members</p>
        </div>
      </div>
  </div>
  <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-check"></i>
      </div>
  </div>
  <div class="col-xl-2 my-auto box text-center">
     <div class="icon-container">
       <i class="fa fa-shopping-cart"></i>
      </div>
  </div>
  </div>
</div>

CSS 中的变换旋转不应影响我的跨度和段落标记

transform rotate in CSS should not affect my span and paragraph tag

html

javascript

css

bootstrap-4