I am trying to rotate my border 135 deg on hover but icon rotate also and i want ONLY the border, i post the code if you can help me i will appreciate it,Thank you!
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);
}
`
Here's an option with reverse transform. I updated the HTML to rotate an inner element instead of the .box itself to separate the bootstrap elements from the rotating elements.
.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>