Question 35827 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Trigger that box whith a button? – Jquery

Is it possible to trigger this rotate function with a click on a button? with :active it’s possible to rotate it by clicking on the box. But you will need to keep the button pressed; is it possible to have some kind of toggle function on :active?

Is there any JavaScript to make a box flip?

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>
Tags:

4

Answers


  1. 0

    One approach is as below, with comments in the code to explain what’s going on:

    // here we use document.querySelector() to retrieve the first <button> element
// in the document; we then use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', (e)=>{
  // the Event Object ('e') is passed to the function body, we retrieve
  // the element to which the function was bound (Event.currentTarget)
  // and from there we use Element.closest() to find the closest '.card-wrap'
  // element:
  e.currentTarget.closest('.card-wrap')
    // from there we use Element.querySelector() to find the first (if any)
    // flip-box element within that ancestor:
    .querySelector('.flip-box')
    // and use the Element.classList API to toggle the 'active' class
    // on that 'flip-box' element:
    .classList.toggle('active');
});
    body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner,
/* added another selector, so that the
   .flip-box-inner element within
   .flip-box.active also rotates (is
   rotated): */
.flip-box.active .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
    <h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box, or click the button, below:</h3>

<!-- creating a wrapper element for each 'card' or 'flip-box' in order
     to query the DOM more easily to find the relevant .flip-box from
     a clicked <button>: -->
<div class="card-wrap">
  <!-- insert a <button> with which the user can interact: -->
  <button type="button">Toggle the card</button>
  <div class="flip-box">
    <div class="flip-box-inner">
      <div class="flip-box-front">
        <h2>Front Side</h2>
      </div>
      <div class="flip-box-back">
        <h2>Back Side</h2>
      </div>
    </div>
  </div>
</div>

    JS Fiddle demo.

    References:

    Login or Signup to reply.
  2. 0

    This can be done without Javascript:

    body {
     font-family: Arial, Helvetica, sans-serif;
}
 .flip-box {
     background-color: transparent;
     width: 300px;
     height: 200px;
     border: 1px solid #f1f1f1;
     perspective: 1000px;
}
 .flip-box-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.8s;
     transform-style: preserve-3d;
}
 .check:checked ~ .flip-box .flip-box-inner {
     transform: rotateY(180deg);
     background-color: black;
}
 .flip-box-front, .flip-box-back {
     position: absolute;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
}
 .flip-box-front {
     background-color: #bbb;
     color: black;
}
 .flip-box-back {
     background-color: dodgerblue;
     color: white;
     transform: rotateY(180deg);
}

/* Here is the code I added */
 a.click-button {
     background: steelblue;
     padding: 5px;
     border-radius: 5px;
     color: white;
     margin-bottom: 20px;
     display: inline-block;
}
 input[type="checkbox" i] {
     display: none;
}
       <h1>3D Flip Box (Horizontal)</h1>
   <h3>Hover over the box below:</h3>
   
   <!-- add a checkbox -->
   <input type="checkbox" class="check" id="checked">
   <label class="menu-btn" for="checked">
   <a class="click-button">click here</a>
   </label>
   
   
   <div class="flip-box">
      <div class="flip-box-inner">
         <div class="flip-box-front">
            <h2>Front Side</h2>
         </div>
         <div class="flip-box-back">
            <h2>Back Side</h2>
         </div>
      </div>
   </div>
    Login or Signup to reply.
  3. 0

    As long as you don’t care about IE, classList is a well-supported option.

    In your CSS file, change the following:

    /* old: */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* new: */
.toggle .flip-box-inner {
  transform: rotateY(180deg);
}

    Then create a JavaScript file and add the following to it.

    document
  .getElementsByClassName('flip-box')[0]
  .addEventListener('click', function () {
    this.classList.toggle('toggle');
  });

    Then add the following <script> element to your html file.

    <script src="<your JavaScript file name>.js"></script>

    Here is the full code snippet:

    document
  .getElementsByClassName('flip-box')[0]
  .addEventListener('click', function () {
    this.classList.toggle('toggle');
  });
    body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.toggle .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
    <h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

    Hope this helps.

    Login or Signup to reply.
  4. 0
    • define a generic .flip class that does a 180deg turn of any element it is assigned to with transform: rotateY(180deg).
    • add an original state transform: rotateY(0deg) to the class to be flipped (here .flip-box-inner showing the ‘front’).
    • Assign a Javascript click event listener to the parent to be clicked (here .flip-box).
    • have JS toggle the generic .flip class on/off.

    UPDATE reply after OP comment

    I replaced the snippet Javscript with jQuery syntax doing the same as the initial vanilla Javascript.

    /*
   jQuery alternative
*/
$('.flip-box').on('click', function() {
    $('.flip-box-inner').toggleClass('flip');
});

/* DISABLED ORIGINAL JAVASCRIPT, no jQuery
// Reference to elements concerned
// This can be any parent/child combination
const el1 = document.querySelector(".flip-box");       // parent to be clicked
const el2 = document.querySelector(".flip-box-inner"); // child to be flipped

// Attach listener to parent, toggle child flip
el1.addEventListener('click', () => { el2.classList.toggle('flip') });
*/
    body {
    font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;

    /* ADDED, original state */
    transform: rotateY(0deg);
}

/* CHANGED from '.flip-box:hover .flip-box-inner' to */
.flip { transform: rotateY(180deg) }
/* When toggled 'off' in JS '.flip-box-inner'
   will revert back to original state */

.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    background-color: #bbb;
    color: black;
}

.flip-box-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>

<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
    <div class="flip-box-inner">
        <div class="flip-box-front">
            <h2>Front Side</h2>
        </div>
        <div class="flip-box-back">
            <h2>Back Side</h2>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search