Estoy tratando de rotar mi borde 135 grados al pasar el mouse, pero el icono también gira y SOLO quiero el borde. Publico el código. Si me pueden ayudar, lo agradeceré. ¡Gracias!
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); } `Aquí hay una opción con transform inversa. Actualicé el HTML para rotar un elemento interno en lugar del propio .box para separar los elementos de arranque de los elementos giratorios.
.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>