Change CSS transform perspective on click-CodePudding

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

CodePudding user response：

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>