Learn CSS Transforms by Building a Penguin - Step 16

Tell us what’s happening:

I have problem on Building a Penguin step 16. On the transform property I’ve tried many times but it didn’t work. I’ve tried in four different ways but not working.

transform: 0deg, 44deg;
transform: 0deg 44deg;
transform: (0deg, 44deg);
transform: (0deg 44deg);

What should I do now?? Where is the mistake??

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <div class="left-mountain"></div>
    <div class="penguin"></div>
    <div class="ground"></div>
/* file: styles.css */
body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;

/* User Editable Region */

.left-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
  position: absolute;
  transform: 0deg, 44deg;

/* User Editable Region */

.penguin {
  width: 300px;
  height: 300px;
  margin: auto;
  margin-top: 75px;

.ground {
  width: 100vw;
  height: 400px;
  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
  z-index: 3;
  position: absolute;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge Information:

Learn CSS Transforms by Building a Penguin - Step 16

So you know how theres a transform function called rotate to rotate your element by a certain amount of degrees? Like so:

transform: rotate(60deg);

In that same way skew is a function of transform, so it needs to be present in whatever you assign to transform. See if you add it in if it works

It is guiding me to write skew(0deg, 44deg);
Thanks for your help.

1 Like