Lets say this is my website:
* {
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>Is there a way to click the letters e or o and then this is shown with a top view while the whole page gets transformed in the same amount?
Love
This is not possible with only CSS, so with a few JavaScript we can do the following:
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>