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 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>When hovering over the border or icon in the snippet provided, they rotate along with the span and paragraph tags. I would like to avoid this rotation affecting the counter-box division. My goal is for the counter-box to remain stable during the rotation transitions. Any assistance would be greatly appreciated. Thank you.