Digamos que este es mi sitio web:
* { font-size: 80px; text-transform: uppercase; font-family: sans-serif; } html { background: yellow; } span { display: inline-block; transform: skew(-60deg, 0deg); transition: transform 0.5s linear; color: white; box-shadow: 0 0 30px red; letter-spacing: 3em; } <div id="one">H<span>e</span>ll<span>o</span></div> ¿Hay alguna manera de hacer clic en las letras e o o y luego esto se muestra con una vista superior mientras toda la página se transforma en la misma cantidad?
Amor
Esto no es posible solo con CSS, por lo que con un poco de JavaScript podemos hacer lo siguiente:
e.addEventListener('click', () => { document.body.setAttribute('data-skew', 'e'); }); o.addEventListener('click', () => { document.body.setAttribute('data-skew', 'o'); }); * { font-size: 80px; text-transform: uppercase; font-family: sans-serif; } html { background: yellow; } body[data-skew='e'] { transform: skew(60deg, 0deg); } body[data-skew='o'] { transform: skew(0deg, 0deg); } span { display: inline-block; transform: skew(-60deg, 0deg); transition: transform 0.5s linear; color: white; box-shadow: 0 0 30px red; letter-spacing: 3em; } <div id="one">H<span id="e">e</span>ll<span id="o">o</span></div>