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

My snippet:

.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 >
  <div >
   <div >
     <div >
       <i ></i>
       <div >
         <span >3275</span>
          <p>Registered Members</p>
        </div>
      </div>
  </div>
  <div >
     <div >
       <i ></i>
      </div>
  </div>
  <div >
     <div >
       <i ></i>
      </div>
  </div>
  </div>
</div>

As you can see with the snippet, when i hover my border or icon it's rotating the border and icon but also the span and paragraph tag, i would like do not affect my rotate transition affect my counter-box div. I want my counter-box div to be stable, if you can help me i will appreciate it, thank you.

CodePudding user response：

i have changed some css code, please check

.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 >
  <div >
   <div >
     <div >
       <i ></i>
       <div >
         <span >3275</span>
          <p>Registered Members</p>
        </div>
      </div>
  </div>
  <div >
     <div >
       <i ></i>
      </div>
  </div>
  <div >
     <div >
       <i ></i>
      </div>
  </div>
  </div>
</div>

CodePudding user response：

You can use a pseudo-class ::after in your wrapper element to set the styles you want to show on your element and then make it rotate on hover, something like this:

.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>