Mi fragmento:
.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>Como puede ver con el fragmento, cuando muevo mi borde o ícono, gira el borde y el ícono, pero también la etiqueta de intervalo y párrafo, me gustaría que mi transición de rotación no afecte mi div de contracuadro. Quiero que mi div de counter-box sea estable, si me pueden ayudar se lo agradeceré, gracias.
he cambiado algún código css, por favor verifique
.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>Puede usar una pseudoclase ::after en su elemento contenedor para establecer los estilos que desea mostrar en su elemento y luego hacer que gire al pasar el mouse, algo como esto:
.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>