curriculum/challenges/english/blocks/workshop-cat-painting/646cf1206cac5f51804f49cf.md
To position the left ear properly, you can use CSS transform to rotate it in a certain degree.
The transform property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as translate(), rotate(), scale(), skew(), and matrix().
Set the transform property to rotate(-45deg) and see what happens.
You should set the transform property of your .cat-left-ear element to rotate(-45deg). Don't forget to add a semicolon.
assert.equal(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform, 'rotate(-45deg)')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fCC Cat Painting</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<div class="cat-head">
<div class="cat-ears">
<div class="cat-left-ear">
<div class="cat-left-inner-ear"></div>
</div>
<div class="cat-right-ear">
<div class="cat-right-inner-ear"></div>
</div>
</div>
</div>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #c9d2fc;
}
.cat-head {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
width: 205px;
height: 180px;
border: 1px solid #000;
border-radius: 46%;
}
.cat-left-ear {
position: absolute;
top: -26px;
left: -31px;
border-top-left-radius: 90px;
border-top-right-radius: 10px;
--fcc-editable-region--
--fcc-editable-region--
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 70px solid #5e5e5e;
}