I'm trying to figure out how to dynamicaly change the rotation angle of my two h1 elements to match the angle of the black line in the center of the page as the page shrinks and grows. How would I go about calculating this in CSS? Below you will find my HTML and CSS code. Any help is greatly appreciated. Thank you.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 90vw;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
}
.main-head {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
height: 10vh;
width: 90vw;
}
.logo {
height: 30px;
}
.main-nav {
min-width: 20rem;
height: 30px;
display: flex;
align-items: center;
justify-content: space-around;
}
.hero {
border: 1px solid black;
height: 90vh;
position: relative;
background-color: black;
}
.triangle {
width: 90vw;
height: 90vh;
position: absolute;
background: #ffffff;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.skyler-kroll__text {
color: black;
position: absolute;
/*This is what I need to dynamically calculate.*/
rotate: -40deg;
top: 45%;
left: 35.5%;
animation: moveInLeft 1s ease-out;
}
.web-developer__text {
/* color: rgb(218, 41, 41); */
background: linear-gradient(to left, #38d39f, #38a4d3);
background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
rotate: calc(-40deg);
top: 50%;
left: 250px;
animation: moveInRight 1s ease-out;
}
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.styles.css">
<title>Skyler Kroll | Web Developer</title>
</head>
<body>
<header class="main-head">
<div class="logo-container">
<img class="logo" src="./assets/logo.png" alt="logo">
</div>
<nav class="main-nav">
<a class="main-nav__link" href="#">Projects</a>
<a class="main-nav__link" href="#">About</a>
<a class="main-nav__link" href="#">Contact</a>
</nav>
</header>
<main class="main-content">
<header class="hero">
<div class="triangle">
<h1 class="skyler-kroll__text">Skyler Kroll</h1>
</div>
<h1 class="web-developer__text">Web Developer</h1>
</header>
</main>
</body>