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

Jquery – How do I make the transform style be smooth when toggling flat to skewed?

I am trying to create a button that when pressed, toggles one class to another. I want the element to appear 2D flat by default and then skewed when the button is pressed. This is working how I want to but now I am trying to get it to be a smooth transition.
When I use the ‘transition-duration’ property it seems to appear so much larger and then return to the other state. I would like it to go from one state to the other but smoothly without it coming forward so much.
This is the example I have: JsFiddle

 var trigger = 1;
function skewFix() 
{
if(trigger == 0)
  {
document.getElementById("heyBox").classList.add('box2');
document.getElementById("heyBox").classList.remove('box');
document.getElementById("heyBox").classList.toggle('box');
trigger = 1;
  }
  else if(trigger == 1){
  
document.getElementById("heyBox").classList.add('box');
document.getElementById("heyBox").classList.remove('box2');
  trigger = 0;
  }
}
.box { 
background-color: black;
color: white; width:100px; 
height: 100px;
margin: 30px;
-webkit-transform:  perspective(100px) rotateX(40deg) ;
transition-duration: 500ms;
}

.box2 { 
background-color: black;
color: white;
width:100px;
height: 100px;
margin: 30px;
-webkit-transform:  perspective(0px) rotateX(0deg);
transition-duration: 500ms;
}
}

.box2 { background-color: black; color: white; width:100px; height: 100px;margin: 30px;

-webkit-transform:  perspective(0px) rotateX(0deg);
transition-duration: 500ms;

}
<div id="heyBox" class='box2'>hey</div>

<button type="button" onclick="skewFix()">Click Me!</button>

I have tried with the ‘transition-duration’ property but it seems to have this bouncing effect going on which is not what I am looking for.

Tags:

2

Answers


  1. 0

    instead of setting the box2 transform to inherit.

    .box2 { 
    background-color: black;
    color: white;
    width:100px;
    height: 100px;
    margin: 30px;
    -webkit-transform:  inherit;
    transition-duration: 500ms;
    }
    Login or Signup to reply.
  2. 0

    The problem is that the place the viewer is standing is being altered.

    This snippet keeps the viewer stationery (perspective remains the same) and rotates the object about its bottom (using transform-origin).

    var trigger = 1;

function skewFix() {
  if (trigger == 0) {
    document.getElementById("heyBox").classList.add('box2');
    document.getElementById("heyBox").classList.remove('box');
    document.getElementById("heyBox").classList.toggle('box');
    trigger = 1;
  } else if (trigger == 1) {

    document.getElementById("heyBox").classList.add('box');
    document.getElementById("heyBox").classList.remove('box2');
    trigger = 0;
  }
}
    .box {
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  margin: 30px;
  -webkit-transform: perspective(100px) rotateX(40deg);
  transition-duration: 500ms;
  transform-origin: 50% 100%;
}

.box2 {
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  margin: 30px;
  -webkit-transform: perspective(100px) rotateX(0deg);
  transition-duration: 500ms;
  transform-origin: 50% 100%;
}
    <div id="heyBox" class='box2'>hey</div>

<button type="button" onclick="skewFix()">Click Me!</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search