• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

124
Views
Cambiar la perspectiva de transformación CSS al hacer clic

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

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error