3d hover effect reverse animation-CodePudding

I found this cool 3d tilt hover image effect, credit to this codepen: https://codepen.io/technokami/pen/abojmZa

The only problem I found, when you start to hover over it, the animation starts, but as soon as you move the mouse away, it immediately resets to its starting point. It might be a small detail, but would so much better if the animation would smoothly revert back.

(For example: http://jsfiddle.net/Ugc5g/892/ it is not the same, but describes what I mean, with reverse back the animation, I would like to achieve the similarly reverse back animation with the first 3d hover animation codepen, scale and rotate back to the origin position, not just jumping back)

        /* Add listener for mouseout event, remove the rotation 
TODO: add reverse animation scale and rotate back to original smoothly
*/
    el.addEventListener('mouseout', function() {
      el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
    })

I tried to fix it, but could not find the proper solution for it, hope a css animation master here can help me out.

CodePudding user response：

Like this or rotate back by going to 360?? this one is to smooth it back by delaying it.

/* Store the element in el */
let el = document.getElementById('tilt')

/* Get the height and width of the element */
const height = el.clientHeight
const width = el.clientWidth

/*
  * Add a listener for mousemove event
  * Which will trigger function 'handleMove'
  * On mousemove
  */
el.addEventListener('mousemove', handleMove)

/* Define function a */
function handleMove(e) {
  /*
    * Get position of mouse cursor
    * With respect to the element
    * On mouseover
    */
  /* Store the x position */
  const xVal = e.layerX
  /* Store the y position */
  const yVal = e.layerY
  
  /*
    * Calculate rotation valuee along the Y-axis
    * Here the multiplier 20 is to
    * Control the rotation
    * You can change the value and see the results
    */
  const yRotation = 20 * ((xVal - width / 2) / width)
  
  /* Calculate the rotation along the X-axis */
  const xRotation = -20 * ((yVal - height / 2) / height)
  
  /* Generate string for CSS transform property */
  const string = 'perspective(500px) scale(1.1) rotateX('   xRotation   'deg) rotateY('   yRotation   'deg)'
  
  /* Apply the calculated transformation */
  el.style.transform = string
}

/* Add listener for mouseout event, remove the rotation */
el.addEventListener('mouseout', function() {
  el.style.transform = ' perspective(500px) scale(1) rotateX(0) rotateY(0) ';
  el.style.transition = 'all 3s ease-out';
})

/* Add listener for mouseover event, to simulate click */
el.addEventListener('mouseover', function() {
  el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)';
   el.style.transition = 'all 0s ease-out'  
})

/* Add listener for hover, simulate release of mouse click */
el.addEventListener('hover', function() {
  el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)';
  el.style.transition = 'all 0s ease-out';
    
});

html {
 display: flex;
  justify-content: center;
  align-items: center;
  align-contents: center;
  height: 100%;
}

/* Styles for the tilt block */
#tilt {
  display: block;
  height: 200px;
  width: 300px;
  background-color: grey;
  margin: 0 auto;
  transition: box-shadow 0.1s, transform 0.1s;
  
  /*
    * Adding image to the background
    * No relation to the hover effect.
    */
  background-image: url(http://unsplash.it/300/200);
  background-size: 100%;
  background-repeat: no-repeat;
}

#tilt:hover {
  box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
  cursor: pointer;
}

<div id="tilt">
  <!--  Container for our block  -->
</div>