Tell us what’s happening:
I’ve been working on this project for about 40 minutes, mainly because I’m stuck on step 23. For about 25 minutes now, I’ve been unable to pass this step and I’m not sure why. I’ve retyped the requested property multiple times, but to no avail. I’m sure something is wrong, but I’m not sure what it is. Any help is appreciated.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
/* file: styles.css */
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position: absolute;
height: 55vw;
width: 55vw;
max-width: 500px;
max-height: 500px;
animation-name: wheel;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
}
.line:nth-of-type(2) {
transform: rotate(60deg);
}
.line:nth-of-type(3) {
transform: rotate(120deg);
}
.line:nth-of-type(4) {
transform: rotate(180deg);
}
.line:nth-of-type(5) {
transform: rotate(240deg);
}
.line:nth-of-type(6) {
transform: rotate(300deg);
}
/* User Editable Region */
.cabin {
background-color: red;
width: 20%;
height: 20%;
position: absolute;
border: 2px solid;
transform-origin: 50% 0%;
animation: cabins 10s linear infinite;
}
/* User Editable Region */
.cabin:nth-of-type(1) {
right: -8.5%;
top: 50%;
}
.cabin:nth-of-type(2) {
right: 17%;
top: 93.5%;
}
.cabin:nth-of-type(3) {
right: 67%;
top: 93.5%;
}
.cabin:nth-of-type(4) {
left: -8.5%;
top: 50%;
}
.cabin:nth-of-type(5) {
left: 17%;
top: 7%;
}
.cabin:nth-of-type(6) {
right: 17%;
top: 7%;
}
@keyframes wheel {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes cabins {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15
Challenge: Learn CSS Animation by Building a Ferris Wheel - Step 23
Link to the challenge: