Css turn when button clicked

user_16315061 0
Viewed 245

I have a form that includes a button (on the left). On the right I have a picture. So when the user clicks the button, I want the picture to have a return around effect and show another div that displays the result. So here is my code:

<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>

So at first, calculate__content__result is not displaying but when the user clicks the button, I want it to be shown and display none the image with the css effect turn around (the image rotate on its Y axis).

Could you please help me?

css html jquery javascript
3 Answers

You can use the CSS rotate transform to turn the div.

This snippet has simplified things just to show the basics. It also puts the image as background to the div as it's not really needed as an element in the HTML.

The div starts with rotateY(0) (so that the transition has a starting point), sets transition to transition any transforms and on clicking the button a new class is added to the div which changes it to rotateY(90deg). Note that the transform origin has been set to the left hand side so that the rotation is about that (the default is to transform about the center).

.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>

Obviously you will want to put back your other formatting. You can also play with CSS perspective, depending on exactly what result you want.

Note: I didn't quite understand your use of form though - the snippet here assumes the result is underneath the turning element already.

user_108674540

You can just add some class in your top parent to record that customers have clicked the button, you can do this in Javascript easily.

Once done, targeting the parent, you can assign CSS to your child image, result class easily.

Suppose you added class named "active" in your top parent which is "calculate__content" then css will be like this:

.mychildclass1{opacity:1;}
.mychildclass2{opacity:0;}
.calculate__content.active .mychildclass1{opacity:0;}
.calculate__content.active .mychildclass2{opacity:1;}

You can add CSS animation property to animate this further.

user_41101120

As i told you in comment , Must check how does it work, Please in css part you apply yours , i just told you action to apply css on click

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>

user_130930080
Related