3d hover 效果反转 animation

Question

我发现了这个很酷的 3d 倾斜 hover 图像效果，归功于这个代码笔： https://codepen.io/technokami/pen/abojmZa

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

（比如： http://jsfiddle.net/Ugc5g/892/是不一样的，但是说明了我的意思，with reverse back the animation,我想实现同样的reverse back animation with the first 3d 8842085089843888 8842085068843888 codepen，缩放并旋转回原点 position，不只是跳回去）

        /* 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 animation 高手可以帮助我。

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>