25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
1.8 KiB
1.8 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6140d10d50636e14695013b2 | Step 9 | 0 | step-9 |
--description--
Create a selector to target your second .line element. Set the transform property to rotate(60deg).
Remember that the transform property allows you to manipulate the shape of an element. In this case, using the rotate(60deg) value will rotate the element around its transform-origin point by 60 degrees clockwise.
--hints--
You should create a .line:nth-of-type(2) selector.
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
Your .line:nth-of-type(2) selector should have a transform property set to rotate(60deg).
assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
--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;
}
.line {
background-color: black;
width: 50%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
}
--fcc-editable-region--
--fcc-editable-region--