Tengo un formulario que incluye un botón (a la izquierda). A la derecha tengo una foto. Entonces, cuando el usuario hace clic en el botón, quiero que la imagen tenga un efecto de retorno y muestre otro div que muestre el resultado. Así que aquí está mi código:
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content"> <form> <div class="calorie__button__area"> <button type="submit" class="button-secondary button__calculate" > BUTTON </button> </div> </form> </div> <div class="col-lg-6 col-md-12 col-sm-12 calculate__content"> <img src="./assets/img/calculate.png" alt="Weight Calculation Image" /> </div> <div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result"> <div class="row"> <div class="col-lg-8 col-md-12 col-sm-12 calculate__content"> <div class="result__box"> <div class="title">RESULT:</div> </div> </div> <div class="col-lg-4 col-md-12 col-sm-12"></div> </div> </div>Entonces, al principio, el resultado de calcular__contenido__no se muestra, pero cuando el usuario hace clic en el botón, quiero que se muestre y no muestre la imagen con el efecto css (la imagen gira sobre su eje Y).
¿Me podría ayudar?
Puede usar la transformación de rotación CSS para convertir el div.
Este fragmento ha simplificado las cosas solo para mostrar lo básico. También pone la imagen como fondo para el div, ya que no es realmente necesaria como elemento en el HTML.
El div comienza con rotar Y (0) (para que la transición tenga un punto de inicio), establece la transición para transicionar cualquier transformación y al hacer clic en el botón se agrega una nueva clase al div que lo cambia a rotar Y (90 grados). Tenga en cuenta que el origen de transformación se ha establecido en el lado izquierdo para que la rotación sea sobre eso (el valor predeterminado es transformar sobre el centro).
.container { position: relative; width: 40vmin; height: 30vmin; } #turnEl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(0deg); transform-origin: 0 0; transition: transform 2s linear; background-image: url(https://picsum.photos/id/1042/768/1024); background-size: cover; } #turnEl.turnover { transform: rotateY(-90deg); } <button onclick="document.getElementById('turnEl').classList.add('turnover');"> BUTTON </button> <div class="container"> <div id="turnEl"> </div> <div class="title">RESULT:</div> </div>Obviamente, querrá volver a colocar su otro formato. También puede jugar con la perspectiva CSS, dependiendo exactamente del resultado que desee.
Nota: Sin embargo, no entendí muy bien su uso de la forma: el fragmento aquí asume que el resultado ya está debajo del elemento de giro.
Simplemente puede agregar alguna clase en su padre superior para registrar que los clientes han hecho clic en el botón, puede hacerlo fácilmente en Javascript.
Una vez hecho esto, apuntando al padre, puede asignar CSS a la imagen de su hijo, clase de resultado fácilmente.
Supongamos que agregó una clase llamada "activo" en su padre superior que es "calcular__contenido", entonces css será así:
.mychildclass1{opacity:1;} .mychildclass2{opacity:0;} .calculate__content.active .mychildclass1{opacity:0;} .calculate__content.active .mychildclass2{opacity:1;}Puede agregar la propiedad de animación CSS para animar esto aún más.
Como te dije en el comentario, debes verificar cómo funciona, por favor, en la parte de css, aplica el tuyo, solo te dije acción para aplicar css al hacer clic
function myFunction() { document.getElementById("myDIV").className = "mystyle"; } .mystyle{ width: 300px; border-radius: 50%; height: auto; transform: rotateY(45deg); } <div class="col-lg-4 col-md-12 col-sm-12 calculate__content"> <div class="calorie__button__area"> <button type="button" onclick="myFunction()" class="button-secondary button__calculate" > BUTTON </button> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 calculate__content"> <img src="https://hover.blog/wp-content/uploads/2015/08/dot-online-1280x720.png" id="myDIV" alt="Weight Calculation Image" /> </div> <div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result"> <div class="row"> <div class="col-lg-8 col-md-12 col-sm-12 calculate__content"> <div class="result__box"> <div class="title">RESULT:</div> </div> </div> <div class="col-lg-4 col-md-12 col-sm-12"></div> </div> </div>