Hey there, I'm currently working with module.css in React and facing an issue when trying to include the following line:
<span style="--i:1;"><img src="https://i.postimg.cc/BQcRL38F/pexels-photo-761963.jpg" alt="not found" /></span>
It seems like I'm getting an error specifically related to the style section. As someone who is fairly new to this, do you have any tips on how to troubleshoot this problem?
This snippet is from my gallery.module.css file:
.scope {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: slid 30s linear infinite;
}
.scope span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px);
}
.scope span img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
transition: 2s;
}
.scope span:hover img {
transform: translateY(-50px) scale(1.7);
}
@keyframes slid {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
Here's a glimpse of my gallery.js code:
<div className={styles.scope}>
<span style="--i:1;"><img src="https://i.postimg.cc/BQcRL38F/pexels-photo-761963.jpg" alt="not found" /></span>
<span style="--i:2;"><img src="https://i.postimg.cc/1RWVB11x/pexels-photo-941693.jpg" alt="not found" /></span>
<span style="--i:3;"><img src="https://i.postimg.cc/CMfHRKfP/woman-2003647-960-720.jpg" alt="not found" /></span>
<span style="--i:4;"><img src="https://i.postimg.cc/T1rDCpVT/beautiful-1274056-960-720.jpg" alt="not found" /></span>
<span style="--i:5;"><img src="https://i.postimg.cc/SNf99YQr/woman-1807533-960-720.jpg" alt="not found" /></span>
<span style="--i:6;"><img src="https://i.postimg.cc/2SHBcpZL/pexels-photo-4664520.jpg" alt="not found" /></span>
<span style="--i:7;"><img src="https://i.postimg.cc/CxBzNcjw/Opera-Snapshot-2020-07-03-162022-www-freepik-com.png" alt="not found" /></span>
<span style="--i:8;"><img src="https://i.postimg.cc/0QckxSpt/Opera-Snapshot-2020-07-03-161422-www-freepik-com.png" alt="not found" /></span>
</div>
Every time I try to add styles="--i:1" or any other style attribute, I encounter the error message
Style prop value must be an objectBeing relatively new to React, I'm unsure about the correct approach to resolve this issue. Any guidance would be greatly appreciated.