3d悬停效果反向动画

Question

我发现了这个很酷的 3D 倾斜悬停图像效果，归功于此 codepen： https://codepen.io/technokami/pen/abojmZa

我发现的唯一问题是，当您开始将鼠标悬停在其上时，动画就会开始，但是一旦您将鼠标移开，它就会立即重置到起点。这可能是一个小细节，但如果动画能够顺利恢复，那就更好了。

（例如：http://jsfiddle.net/Ugc5g/892/ 它是不一样，但描述了我的意思，通过反向动画，我想用第一个3d悬停动画codepen实现类似的反向动画，缩放并旋转回原点位置，而不仅仅是跳跃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)'
    })

我尝试修复它，但找不到合适的解决方案，希望这里的CSS动画大师可以帮助我。

Answer 1

像这样还是通过360来旋转？这是通过延迟它来使其平滑。

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