I tried to figure out why the :root variables are not changing but failed to do that. Can someone help me.
Actually I am trying to create a tilting card that tilts on mouse hover but for some reason it is not working as expected.
You can also check it on codepen. Here is the link
:root {
--width: 420px;
--height: 560px;
--perspective: 1000px;
--rotateX: 0deg;
--rotateY: 0deg;
}
.card {
position: relative;
height: var(--height);
width: var(--width);
background-color: green;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
transition: transform 300ms ease;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
}
h1 {
margin: 0;
}
p {
font-weight: 500;
}
.mouse-tracker {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
.mouse-tracker > div {
outline: 1px solid blue;
width: calc(100% / 4);
height: calc(100% / 4);
}
.mouse-tracker > div:hover {
background-color: orange;
}
.mouse-tracker {
--rotateX: 15deg;
--rotateY: -15deg;
}
.mouse-tracker > div:nth-child(1):hover {
--rotateX: 15deg;
--rotateY: -15deg;
background-color: red;
}
.mouse-tracker > div:nth-child(2):hover {
--rotateX: 15deg;
--rotateY: -15deg;
background-color: red;
}
.mouse-tracker > div:nth-child(3) {
}
.mouse-tracker > div:nth-child(4) {
}
.mouse-tracker > div:nth-child(5) {
}
.mouse-tracker > div:nth-child(6) {
}
.mouse-tracker > div:nth-child(7) {
}
.mouse-tracker > div:nth-child(8) {
}
.mouse-tracker > div:nth-child(9) {
}
.mouse-tracker > div:nth-child(10) {
}
.mouse-tracker > div:nth-child(11) {
}
.mouse-tracker > div:nth-child(12) {
}
.mouse-tracker > div:nth-child(13) {
}
.mouse-tracker > div:nth-child(14) {
}
.mouse-tracker > div:nth-child(15) {
}
.mouse-tracker > div:nth-child(16) {
}<div class="card">
<h1>Tilting Card</h1>
<p>Hover to see effect!</p>
<div class="mouse-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>