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), la 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 dello 0% da sinistra e dello 0% dall'alto, impostandolo nell'angolo in alto a sinistra dell'elemento.
--hints--
Il selettore .line dovrebbe avere una proprietà transform-origin impostata su 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 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;
}
--fcc-editable-region--
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
}
--fcc-editable-region--