Encontré este genial efecto de imagen de desplazamiento de inclinación en 3D, crédito a este codepen: https://codepen.io/technokami/pen/abojmZa
El único problema que encontré, cuando comienzas a pasar el mouse sobre él, la animación comienza, pero tan pronto como alejas el mouse, inmediatamente se restablece a su punto de inicio. Puede ser un pequeño detalle, pero sería mucho mejor si la animación se revirtiera sin problemas.
(Por ejemplo: http://jsfiddle.net/Ugc5g/892/ no es lo mismo, pero describe lo que quiero decir, con la animación inversa, me gustaría lograr la animación inversa similar con la primera animación 3d flotante codificar, escalar y rotar de regreso a la posición de origen, no solo saltar hacia atrás)
/* 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)' })Traté de arreglarlo, pero no pude encontrar la solución adecuada, espero que un maestro de animación css aquí pueda ayudarme.
¿Te gusta esto o giras hacia atrás yendo a 360? este es para suavizarlo retrasándolo.
/* 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>