Trigger CSS transformations when a button is clicked

Question

Trigger CSS transformations when a button is clicked

I have a form with a button on the left side and an image on the right side. When the user clicks the button, I want the image to rotate around its Y axis and display another div showing the result. Here is the code snippet:

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

Currently, the element calculate__content__result is hidden, but upon clicking the button, it should be displayed while hiding the image with a CSS effect that rotates it on its Y axis.

Can you assist me with this implementation?

javascript html jquery css

Answer 1

Answer №1

If you want to rotate a div using CSS, you can utilize the CSS rotate transform.

This code snippet simplifies the process to demonstrate the basics. It includes setting the image as the background of the div instead of adding it as an HTML element.

The initial state of the div is set to rotateY(0) to establish a starting point for the transition. When the button is clicked, a new class is added to the div, changing it to rotateY(90deg). The transform origin is positioned on the left side to ensure rotation occurs around that point (default is 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>

Feel free to adjust the formatting and experiment with CSS perspective to achieve your desired result.

Note: This code assumes the result appears below the rotating element. If this is not the case, please provide further clarification.

Answer 2

If you want to rotate a div using CSS, you can utilize the CSS rotate transform.

This code snippet simplifies the process to demonstrate the basics. It includes setting the image as the background of the div instead of adding it as an HTML element.

The initial state of the div is set to rotateY(0) to establish a starting point for the transition. When the button is clicked, a new class is added to the div, changing it to rotateY(90deg). The transform origin is positioned on the left side to ensure rotation occurs around that point (default is 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>

Feel free to adjust the formatting and experiment with CSS perspective to achieve your desired result.

Note: This code assumes the result appears below the rotating element. If this is not the case, please provide further clarification.

Answer 3

Answer №2

To track customer button clicks, simply add a class to the parent element using Javascript.

Then, target the parent element and apply CSS styles to the child image class.

For example, if you add the class "active" to the parent element with the class "calculate__content", your CSS would look like:

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

You can also add CSS animations to enhance the effect.

Answer 4

To track customer button clicks, simply add a class to the parent element using Javascript.

Then, target the parent element and apply CSS styles to the child image class.

For example, if you add the class "active" to the parent element with the class "calculate__content", your CSS would look like:

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

You can also add CSS animations to enhance the effect.

Answer 5

Answer №3

Just a heads up, make sure to test how it functions. Feel free to customize the CSS according to your needs. I have simply provided instructions on applying CSS when clicked.

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>

Answer 6

Just a heads up, make sure to test how it functions. Feel free to customize the CSS according to your needs. I have simply provided instructions on applying CSS when clicked.

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>

Trigger CSS transformations when a button is clicked

Answer №1

Answer №2

Answer №3

Similar questions

Gatsby: A guide on inserting unadulterated HTML within the head section

Unraveling JavaScript Object Literal Strings that resemble JSON

Leverage socket.io in various routes within a node.js application

Guide on transforming the popup hover state into the active state in vue.js through a click event

What is the correct format for the data section in an AJAX request to ensure it functions properly?

Using asp.net and Knockoutjs to make an asynchronous call to a JavaScript library prior to

How can I alter the background color of the entire header in Ionic?

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

The input field within the button stubbornly resists aligning with the right corner

Reposition the navbar nav to the top right corner of my website using Boostrap

Transform a string date in the format of YYYY-MM-DD into a Date object while maintaining the original date within the user's specific timezone

Updating choices in dropdown list depending on the selected options in another dropdown list

Tips for Storing Your Data Collection: A Guide on Different Storage Options

Is it a Mozilla Firefox glitch or something else?

Displaying a Bootstrap modal with empty editing information

AngularJS Error: Attempting to access 'then' property of an undefined value

PHP can be time-consuming when echoing a large amount of HTML data

"Creating a user-friendly time selection feature similar to Google Analytics in

choose to display on mobile devices as a dropdown menu rather than a modal window

What is the process for making a custom texture map to use in ThreeJS materials?