1.9 KiB
1.9 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6140d0069049f5139d78da40 | Step 8 | 0 | step-8 |
--description--
La proprietà transform-origin viene utilizzata per impostare il punto attorno al quale viene applicata una trasformazione CSS. Ad esempio, quando si esegue una rotazione rotate (che farai più tardi in questo progetto), ila proprietà transform-origin determina intorno a quale punto l'elemento è ruotato.
Dai al selettore .line una proprietà transform-origin di 0% 0%. Questo sposterà il punto di origine di 0% da sinistra e 0% dall'alto, impostandolo nell'angolo in alto a sinistra dell'elemento.
--hints--
Il selettore .line dovrebbe avere una proprietà transform-origin impostata a 0% 0%.
const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<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;
}
--fcc-editable-region--
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
}
--fcc-editable-region--