1.8 KiB
1.8 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6140d10d50636e14695013b2 | Step 9 | 0 | step-9 |
--description--
Crea un selettore per selezionare il secondo elemento .line. Imposta la proprietà transform su rotate(60deg).
Ricorda che la proprietà transform ti permette di manipolare la forma di un elemento. In questo caso, utilizzando il valore rotate(60deg) l'elemento verrà ruotato attorno al suo punto transform-origin di 60 gradi in senso orario.
--hints--
Dovresti creare un selettore .line:nth-of-type(2).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
Il selettore .line:nth-of-type(2) dovrebbe avere una proprietà transform con il valore rotate(60deg).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
--seed--
--seed-contents--
<!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>
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
position: absolute;
height: 55vw;
width: 55vw;
max-width: 500px;
max-height: 500px;
}
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
}
--fcc-editable-region--
--fcc-editable-region--