Learn CSS Transforms by Building a Penguin - Step 16

Tell us what’s happening:
Describe your issue in detail here.
don’t know how to code this step, please help!

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./styles.css" />
  <title>Penguin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <div class="left-mountain"></div>
  <div class="penguin"></div>
  <div class="ground"></div>
</body>
</html>
/* 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: clip;
}

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

}

.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/104.0.0.0 Safari/537.36

Challenge: Learn CSS Transforms by Building a Penguin - Step 16

Link to the challenge:

Hi @andrewzw123
you have the right idea but the wrong syntax
you only need to specify skew then pass the arguments for x-axis & y-axis

Mod edit: solution removed 

sorry for just giving away the answer but i couldn’t think of how to explain it without giving it away

1 Like

Thank you, I think maybe just like the default for padding(top,right,bottom,left), skew is default for(x,y)

but how is it decided the shape of the object tho? where is the origin?

hi @andrewzw123
sorry I’ve been extremely busy the past week or so. The original shape is just a square thats 300px by 300px.
you’re then skewing that on the y-axis by 44deg , I believe the skew is from dead center.

I like to think of it as a sheet of paper being drawn from different view angles or the top of a 3d object(its not, but for reference). If you were to draw a 3d block with pencil and paper the side facing the front wouldn’t be drawn square it would be slightly skewed

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.