You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.
In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work.
Step 1
<!DOCTYPE html>
<html lang="en">
</html>
<head>
<title>CSS Transforms by Building a Pengiun</title>
<meta charset ="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body></body>
</hmtl>
Step 2
body {
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
}
Step 3
body {
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
margin:0;
padding:0;
}
Step 4
body {
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
margin: 0;
padding: 0;
width:100%;
height:100vh;
}
Step 5
body {
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow:clip;
}
Step 6
<body>
<div class="ground"></div>
</body>
Step 7
.ground {
width:100vw;
height:400px;
}
Step 8
.ground {
width: 100vw;
height: 400px;
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
}
Step 9
.ground {
width: 100vw;
height: 400px;
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
z-index:3;
position:absolute;
}
Step 10
<body>
<div class="penguin"></div>
<div class="ground"></div>
</body>
Step 11
.penguin {
width:300px;
height:300px;
}
Step 12
.penguin {
width: 300px;
height: 300px;
margin:75px auto;
}
Step 13
<body>
<div class="left-mountain"></div>
<div class="penguin"></div>
<div class="ground"></div>
</body>
Step 14
.left-mountain {
width:300px;
height:300px;
background: linear-gradient(rgb(203, 241, 228),rgb(80, 183, 255));
}
Step 15
.left-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
position:absolute;
}
Step 16
.left-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
position: absolute;
transform: skew(0deg, 44deg);
}
Step 17
.left-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
position: absolute;
transform: skew(0deg, 44deg);
z-index:2;
}
Step 18
.left-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
position: absolute;
transform: skew(0deg, 44deg);
z-index: 2;
margin-top:100px;
}
.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; margin-top:-58px; }
Step 19
<body>
<div class="left-mountain"></div>
<div class="back-mountain"></div>
<div class="penguin"></div> <div class="ground"></div> </body>
Step 20
.back-mountain {
width:300px;
height:300px;
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
}
Step 21
.back-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
position:absolute;
}
Step 22
.back-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
position: absolute;
z-index:1;
}
Step 23
.back-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
position: absolute;
z-index: 1;
transform: rotate(45deg);
left:110px;
top:225px;
}
Step 24
<body>
<div class="left-mountain"></div>
<div class="back-mountain"></div>
<div class="sun"></div>
<div class="penguin"></div>
<div class="ground"></div>
</body>
Step 25
.sun {
width:200px;
height:200px;
background-color:yellow;
}
Step 26
.sun {
width: 200px;
height: 200px;
background-color: yellow;
position:absolute;
border-radius:50%;
}
Step 27
.sun {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
border-radius: 50%;
top:-75px;
right:-75px;
}
Step 28
<div class="penguin">
<div class="penguin-head"></div>
<div class="penguin-body"></div>
</div>
Step 29
.penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
position:relative;
z-index:4;
}
Step 30
.penguin-head {
width:50%;
height:45%;
background: linear-gradient(45deg, gray, rgb(239, 240, 228));
}
Step 31
.penguin-head {
width: 50%;
height: 45%;
background: linear-gradient(
45deg,
gray,
rgb(239, 240, 228)
);
border-top-left-radius: 70%;
border-top-right-radius: 70%;
border-bottom-left-radius: 65%;
border-bottom-right-radius: 65%;
}
Step 32
.penguin-body {
width:53%;
height:45%;
background:linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%);
}
Step 33
.penguin-body {
width: 53%;
height: 45%;
background: linear-gradient(
45deg,
rgb(134, 133, 133) 0%,
rgb(234, 231, 231) 25%,
white 67%
);
border-radius:80% 80% 100% 100%;
}
Step 34
.penguin * {
position:absolute;
}
Step 35
.penguin-head {
width: 50%;
height: 45%;
background: linear-gradient(
45deg,
gray,
rgb(239, 240, 228)
);
border-radius: 70% 70% 65% 65%;
top:10%;
left:25%;
}
Step 36
.penguin-body {
width: 53%;
height: 45%;
background: linear-gradient(
45deg,
rgb(134, 133, 133) 0%,
rgb(234, 231, 231) 25%,
white 67%
);
border-radius: 80% 80% 100% 100%;
top:40%;
left:23.5%;
}
Step 37
.penguin-head {
width: 50%;
height: 45%;
background: linear-gradient(
45deg,
gray,
rgb(239, 240, 228)
);
border-radius: 70% 70% 65% 65%;
top: 10%;
left: 25%;
z-index:1;
}
Step 38
.penguin-body::before {
content:"";
}
Step 39
.penguin-body::before {
content: "";
position:absolute;
}
Step 40
.penguin-body::before {
content: "";
position: absolute;
width:50%;
height:45%;
background-color:gray;
}
Step 41
.penguin-body::before {
content: "";
position: absolute;
width: 50%;
height: 45%;
background-color: gray;
top:10%;
left:25%;
}
Step 42
.penguin-body::before {
content: "";
position: absolute;
width: 50%;
height: 45%;
background-color: gray;
top: 10%;
left: 25%;
border-bottom-right-radius:100%;
border-bottom-left-radius:100%;
border-top-left-radius:0%;
border-top-right-radius:0%;
}
Step 43
.penguin-body::before {
content: "";
position: absolute;
width: 50%;
height: 45%;
background-color: gray;
top: 10%;
left: 25%;
border-radius: 0% 0% 100% 100%;
opacity:70%;
}
Step 44
<div class="penguin-head">
<div class="face"></div>
<div class="face"></div>
</div>
Step 45
.face {
width:60%;
height:70%;
background-color:white;
}
Step 46
.face {
width: 60%;
height: 70%;
background-color: white;
border-radius:70% 70% 60% 60%;
}
Step 47
.face {
width: 60%;
height: 70%;
background-color: white;
border-radius: 70% 70% 60% 60%;
top:15%;
}
Step 48
<div class="penguin-head">
<div class="face left"></div>
<div class="face right"></div>
</div>
Step 49
.face.left {
left:5%;
}
.face.right {
right:5%;
}
Step 50
.face.left {
left: 5%;
}
.face.right {
right:5%;
}
Step 51
<div class="penguin-head">
<div class="face left"></div>
<div class="face right"></div>
<div class="chin"></div>
</div>
Step 52
.chin {
width:90%;
height:70%;
background-color:white;
}
Step 53
.chin {
width: 90%;
height: 70%;
background-color: white;
top:25%;
left:5%;
border-radius:70% 70% 100% 100%;
}
Step 54
:root {
--penguin-face:white;
}
Step 55
:root {
--penguin-face: white;
}
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: skew(0deg, 44deg); z-index: 2; margin-top: 100px;}
.back-mountain { width: 300px; height: 300px; background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); position: absolute; z-index: 1; transform: rotate(45deg); left: 110px; top: 225px;}
.sun { width: 200px; height: 200px; background-color: yellow; position: absolute; border-radius: 50%; top: -75px; right: -75px;}
.penguin { width: 300px; height: 300px; margin: auto; margin-top: 75px; z-index: 4; position: relative;}
.penguin * { position: absolute;}
.penguin-head { width: 50%; height: 45%; background: linear-gradient( 45deg, gray, rgb(239, 240, 228) ); border-radius: 70% 70% 65% 65%; top: 10%; left: 25%; z-index: 1;}
.face { width: 60%; height: 70%; background-color: var(--penguin-face); border-radius: 70% 70% 60% 60%; top: 15%;}
.face.left { left: 5%;}
.face.right { right: 5%;}
.chin { width: 90%; height: 70%; background-color: var(--penguin-face); top: 25%; left: 5%; border-radius: 70% 70% 100% 100%;}
.penguin-body { width: 53%; height: 45%; background: linear-gradient( 45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67% ); border-radius: 80% 80% 100% 100%; top: 40%; left: 23.5%;}
.penguin-body::before { content: ""; position: absolute; width: 50%; height: 45%; background-color: gray; top: 10%; left: 25%; border-radius: 0% 0% 100% 100%; opacity: 70%;}
.ground { width: 100vw; height: 400px; background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); z-index: 3; position: absolute; margin-top: -58px;}
Step 56
<div class="penguin-head">
<div class="face left"></div>
<div class="face right"></div>
<div class="chin"></div>
<div class="eye left"></div>
<div class="eye right"></div>
</div>
Step 57
.eye {
width:15%;
height:17%;
background-color:black;
}
Step 58
.eye {
width: 15%;
height: 17%;
background-color: black;
top:45%;
border-radius:50%;
}
Step 59
.eye.left {
left:25%;
}
.eye.right {
right:25%;
}
Step 60
<div class="penguin-head">
<div class="face left"></div>
<div class="face right"></div>
<div class="chin"></div>
<div class="eye left">
<div class="eye-lid"></div>
</div> <div class="eye right"> <div class="eye-lid"></div> </div> </div>
Step 61
.eye-lid {
width:150%;
height:100%;
background-color:var(--penguin-face);
}
Step 62
.eye-lid {
width: 150%;
height: 100%;
background-color: var(--penguin-face);
top:25%;
left:-23%;
border-radius:50%;
}
Step 63
<div class="blush left"></div>
<div class="blush right"></div>
Step 64
.blush {
width:15%;
height:10%;
background-color:pink;
}
Step 65
.blush {
width: 15%;
height: 10%;
background-color: pink;
top:65%;
border-radius: 50%;
}
Step 66
.blush.left {
left:15%;
}
.blush.right {
right:15%;
}
Step 67
<div class="beak top"></div>
<div class="beak bottom"></div>
Step 68
.beak {
height:10%;
background-color:orange;
border-radius:50%;
}
Step 69
.beak.top {
width:20%;
top:60%;
left:40%;
}
Step 70
.beak.top {
width: 20%;
top: 60%;
left: 40%;
}
.beak.bottom {
width:16%;
top:65%;
left:42%;
}
Step 71
<div class="shirt"></div>
Step 72
<div class="shirt">
<div>💜</div>
</div>
Step 73
<div class="shirt">
<div>💜</div>
<p>I CSS</p>
</div>
Step 74
.shirt {
font-size:25px;
font-family:Helvetica, sans-serif;
font-weight:bold;
}
Step 75
.shirt {
font: bold 25px Helvetica, sans-serif;
}
.shirt div{
font-weight:normal;
}
Step 76
.shirt {
font: bold 25px Helvetica, sans-serif;
}
.shirt div { font-weight: initial; top:22.5px; left:12px;}
Step 77
.shirt {
font: bold 25px Helvetica, sans-serif;
top:165px;
left:127.5px;
z-index:1;
}
.shirt div { font-weight: initial; top: 22.5px; left: 12px;}
Step 78
.shirt {
font: bold 25px Helvetica, sans-serif;
top: 165px;
left: 127.5px;
z-index: 1;
color:#6a6969;
}
.shirt div { font-weight: initial; top: 22.5px; left: 12px;}
Step 79
<div class="penguin-body">
<div class="foot left"></div>
<div class="foot right"></div>
</div>
Step 80
.foot {
width:15%;
height:30%;
background-color:orange;
}
Step 81
.foot {
width: 15%;
height: 30%;
background-color: orange;
top:85%;
border-radius:50%;
}
Step 82
:root {
--penguin-face: white;
--penguin-picorna:orange;
}
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: skew(0deg, 44deg); z-index: 2; margin-top: 100px;}
.back-mountain { width: 300px; height: 300px; background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); position: absolute; z-index: 1; transform: rotate(45deg); left: 110px; top: 225px;}
.sun { width: 200px; height: 200px; background-color: yellow; position: absolute; border-radius: 50%; top: -75px; right: -75px;}
.penguin { width: 300px; height: 300px; margin: auto; margin-top: 75px; z-index: 4; position: relative;}
.penguin * { position: absolute;}
.penguin-head { width: 50%; height: 45%; background: linear-gradient( 45deg, gray, rgb(239, 240, 228) ); border-radius: 70% 70% 65% 65%; top: 10%; left: 25%; z-index: 1;}
.face { width: 60%; height: 70%; background-color: var(--penguin-face); border-radius: 70% 70% 60% 60%; top: 15%;}
.face.left { left: 5%;}
.face.right { right: 5%;}
.chin { width: 90%; height: 70%; background-color: var(--penguin-face); top: 25%; left: 5%; border-radius: 70% 70% 100% 100%;}
.eye { width: 15%; height: 17%; background-color: black; top: 45%; border-radius: 50%;}
.eye.left { left: 25%;}
.eye.right { right: 25%;}
.eye-lid { width: 150%; height: 100%; background-color: var(--penguin-face); top: 25%; left: -23%; border-radius: 50%;}
.blush { width: 15%; height: 10%; background-color: pink; top: 65%; border-radius: 50%;}
.blush.left { left: 15%;}
.blush.right { right: 15%;}
.beak { height: 10%; background-color: var(--penguin-picorna); border-radius: 50%;}
.beak.top { width: 20%; top: 60%; left: 40%;}
.beak.bottom { width: 16%; top: 65%; left: 42%;}
.shirt { font: bold 25px Helvetica, sans-serif; top: 165px; left: 127.5px; z-index: 1; color: #6a6969;}
.shirt div { font-weight: initial; top: 22.5px; left: 12px;}
.penguin-body { width: 53%; height: 45%; background: linear-gradient( 45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67% ); border-radius: 80% 80% 100% 100%; top: 40%; left: 23.5%;}
.penguin-body::before { content: ""; position: absolute; width: 50%; height: 45%; background-color: gray; top: 10%; left: 25%; border-radius: 0% 0% 100% 100%; opacity: 70%;}
.foot { width: 15%; height: 30%; background-color:var(--penguin-picorna); top: 85%; border-radius: 50%;}
Step 83
.foot {
width: 15%;
height: 30%;
background-color: var(--penguin-picorna);
top: 85%;
border-radius: 50%;
}.foot.left { left:25%;}.foot.right { right:25%;}
Step 84
.foot.left {
left: 25%;
transform:rotate(80deg);
}
.foot.right { right: 25%; transform:rotate(-80deg);}
Step 85
.foot {
width: 15%;
height: 30%;
background-color: var(--penguin-picorna);
top: 85%;
border-radius: 50%;
z-index:-1;
}
Step 86
<div class="penguin-body">
<div class="arm left"></div>
<div class="arm right"></div>
<div class="foot left"></div>
<div class="foot right"></div>
</div>
Step 87
.arm {
width:30%;
height:60%;
background:linear-gradient(90deg, gray,rgb(209, 210, 199));
}
Step 88
:root {
--penguin-face: white;
--penguin-picorna: orange;
--penguin-skin:gray;
}
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: skew(0deg, 44deg); z-index: 2; margin-top: 100px;}
.back-mountain { width: 300px; height: 300px; background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); position: absolute; z-index: 1; transform: rotate(45deg); left: 110px; top: 225px;}
.sun { width: 200px; height: 200px; background-color: yellow; position: absolute; border-radius: 50%; top: -75px; right: -75px;}
.penguin { width: 300px; height: 300px; margin: auto; margin-top: 75px; z-index: 4; position: relative;}
.penguin * { position: absolute;}
.penguin-head { width: 50%; height: 45%; background: linear-gradient( 45deg, var(--penguin-skin), rgb(239, 240, 228) ); border-radius: 70% 70% 65% 65%; top: 10%; left: 25%; z-index: 1;}
.face { width: 60%; height: 70%; background-color: var(--penguin-face); border-radius: 70% 70% 60% 60%; top: 15%;}
.face.left { left: 5%;}
.face.right { right: 5%;}
.chin { width: 90%; height: 70%; background-color: var(--penguin-face); top: 25%; left: 5%; border-radius: 70% 70% 100% 100%;}
.eye { width: 15%; height: 17%; background-color: black; top: 45%; border-radius: 50%;}
.eye.left { left: 25%;}
.eye.right { right: 25%;}
.eye-lid { width: 150%; height: 100%; background-color: var(--penguin-face); top: 25%; left: -23%; border-radius: 50%;}
.blush { width: 15%; height: 10%; background-color: pink; top: 65%; border-radius: 50%;}
.blush.left { left: 15%;}
.blush.right { right: 15%;}
.beak { height: 10%; background-color: var(--penguin-picorna); border-radius: 50%;}
.beak.top { width: 20%; top: 60%; left: 40%;}
.beak.bottom { width: 16%; top: 65%; left: 42%;}
.shirt { font: bold 25px Helvetica, sans-serif; top: 165px; left: 127.5px; z-index: 1; color: #6a6969;}
.shirt div { font-weight: initial; top: 22.5px; left: 12px;}
.penguin-body { width: 53%; height: 45%; background: linear-gradient( 45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67% ); border-radius: 80% 80% 100% 100%; top: 40%; left: 23.5%;}
.penguin-body::before { content: ""; position: absolute; width: 50%; height: 45%; background-color: var(--penguin-skin); top: 10%; left: 25%; border-radius: 0% 0% 100% 100%; opacity: 70%;}
.arm { width: 30%; height: 60%; background: linear-gradient( 90deg, var(--penguin-skin), rgb(209, 210, 199) );}
Step 89
.arm.left {
top:35%;
left:5%;
}
.arm.right {
top:0%;
right:-5%;
}
Step 90
.arm.left {
top: 35%;
left: 5%;
transform-origin:0% 0%;
}
.arm.right { top: 0%; right: -5%;}
Step 91
.arm.left {
top: 35%;
left: 5%;
transform-origin: top left;
transform: rotate(130deg) scaleX(-1);
}
Step 92
.arm.right {
top: 0%;
right: -5%;
transform:rotate(-45deg);
}
Step 93
.arm {
width: 30%;
height: 60%;
background: linear-gradient(
90deg,
var(--penguin-skin),
rgb(209, 210, 199)
);
border-radius:30% 30% 30% 120%;
}
Step 94
.arm {
width: 30%;
height: 60%;
background: linear-gradient(
90deg,
var(--penguin-skin),
rgb(209, 210, 199)
);
border-radius: 30% 30% 30% 120%;
z-index:-1;
}
Step 95
@keyframes wave {
10% {
}
20% {
}
30% {
}
40%{ }}
Step 96
@keyframes wave {
10% {
}
20% {
}
30% {
}
40%{ }}
Step 97
@keyframes wave {
10% {
transform:rotate(110deg) scaleX(-1);
}
20% {
} 30% {
} 40% {
}}
Step 98
@keyframes wave {
10% {
transform: rotate(110deg) scaleX(-1);
}
20% {
transform: rotate(130deg) scaleX(-1);
}
30% {
} 40% {
}}
Step 99
@keyframes wave {
10% {
transform: rotate(110deg) scaleX(-1);
}
20% {
transform: rotate(130deg) scaleX(-1);
}
30% {
transform:rotate(110deg) scaleX(-1);
}
40% {
transform:rotate(130deg) scaleX(-1);
}
}
Step 100
.arm.left {
top: 35%;
left: 5%;
transform-origin: top left;
transform: rotate(130deg) scaleX(-1);
animation-name: wave;
animation-duration:3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
Step 101
.penguin:active {
transform:scale(1.5);
}
Step 102
.penguin:active {
transform: scale(1.5);
cursor:not-allowed;
}
Step 103
.penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
z-index: 4;
position: relative;
transition-duration:1s;
transition-timing-function:ease-in-out;
transition-delay:0ms;
}
Step 104
.ground {
width: 100vw;
height: 400px;
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
z-index: 3;
position: absolute;
margin-top: -58px;
height:calc(100vh - 300px);
}
THANK YOU GUYS !