¿Te gustaría Java desde cero?
Tenemos los diplomados que necesitas.¡Haz clic aquí!
Ante la pregunta de si es posible rotar libremente un elemento en la pantalla mediante el movimiento del ratón o el dedo (en las pantallas táctiles) sólo con HTML5 y CSS, la respuesta típica sería “no, no sin JavaScript” … pero esta solución que proponemos sólo necesita unas pocas líneas de JS, y esta variación tiene la adición interesante de las variables CSS.
Objetos en el espacio
Comenzamos con una única imagen, para simplificar el ejemplo, en el espacio:
|
1
|
<img src="imagen.jpg" srcset="imagen-2x.jpg 2x" alt> |
(Por supuesto, la página podría tener tantos elementos como deseas; hemos eliminado todo lo demás en aras de la simplicidad y la claridad).
El body se establece con margen 0 y un min-height de 100 vh, y utiliza Flexbox para centrar el elemento en la página:
|
1
2
3
4
5
6
7
8
9
10
|
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 60vw; margin: 0; --mouseX: 0deg; --mouseY: 0deg;} |
Además, configuramos un CSS 3D perspective, junto con dos variables CSS. Estas variables se utilizan para el estilo de la imagen:
|
1
2
3
4
5
6
|
img {<p> </p> width: 80vmin; height: 80vmin; transform: rotateX(calc(var(--mouseY))) rotateY(calc(var(--mouseX)));} |
Ten en cuenta que debido a que estamos usando más de una variable en la propiedad transform, hay que rodear cada una con calc() para evitar un error de sintaxis. En un futuro próximo, cuando rotateX e Y se conviertan en sus propias propiedades CSS, esto no será necesario.
La imagen necesita tanto una anchura como una altura, ya que de lo contrario Flexbox estirará la imagen.
Position Tracking
El código JavaScript se inicia mediante la identificación de la imagen:
|
1
|
const img = document.getElementsByTagName(“img")[0]; |
Si bien es normal que las variables CSS se definan y utilicen exclusivamente en el interior de una hoja de estilo, también es posible configurarlos desde JavaScript, usando setProperty. Lo que hemos hecho es ir al interior de una función que toma la posición actual del puntero, determina la altura y la anchura de la ventana del navegador (y lo divide por la mitad), y a continuación utiliza esta información para determinar la cantidad correcta de la rotación de la imagen:
|
1
2
3
4
5
6
|
function sway(xPos, yPos) { let wh = window.innerHeight / 2; ww = window.innerWidth / 2; document.body.style.setProperty("--mouseX", (xPos - ww) / 25+"deg"); document.body.style.setProperty("--mouseY", (yPos - wh) / 25+"deg");} |
Esta función se inicia por tanto con el movimiento del ratón o el tacto:
|
1
2
3
4
5
6
7
8
9
10
|
document.addEventListener("mousemove", function(e) { sway(e.clientX,e.clientY);})document.addEventListener("touchmove", function(e) { e.preventDefault(); var touch = e.targetTouches[0]; if (touch) { sway(touch.pageX, touch.pageY); }}); |
Ten en cuenta que los valores utilizados en las variables se intercambian: el movimiento en X crea la rotación de la imagen en Y, y el movimiento en Y crea la rotación en X.
El poder de las Variables
Como Lea Verou señaló en su reciente CSS Conf presentation, el apoyo casi universal de los navegadores para las variables CSS permite a los estilos mover de nuevo a la posición que tienen previsto mantener – la de presentación – mientras que JavaScript puede tener su papel tradicional de comportamiento. Las variables CSS permiten una comunicación fluida entre los dos.
Si necesitas apoyo en MS Edge e IE, (y superar las limitaciones actuales de Firefox) podrías escribir la función exclusivamente en JavaScript:
|
1
2
3
|
function sway(xPos, yPos) { img.style.transform = "rotateX("+(yPos - wh) / 25+"deg) rotateY("+(xPos - ww) / 25 +"deg)";} |
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
¿Te gustaría Java desde cero?
Tenemos los diplomados que necesitas.¡Haz clic aquí!
