in this article, we’re going to Create a Flying Helicopter with HTML and CSS, In this project, we have here a flying effect the helicopter is flying over the city the blades are moving, the entire helicopter is created with HTML and CSS and actually, there will be no image except background one.
You can see the Demo here: Flying Helicopter with HTML and CSS
What You Should Know Before Create a Flying Helicopter with HTML and CSS
- Basic knowledge of HTML.
- Should know some CSS and CSS3 animations.
How to Create a Flying Helicopter with HTML and CSS step by step
- Setting Up Default Values
- Setting Up Background Space
- Setting Up Space For Helicopter
- Creating Blade For Helicopter
- Setting Up Cockpit
- Setting Up Landing-skids
- Setting Up Tailcone
- Setting Up Tailfin
- Setting Up Tailrotor
- Setting Up Mast And Main-rotor
- Adding Details And Animations To Helicopter
Implementation Of Flying Helicopter with HTML and CSS
let’s go ahead and start to create it, Create our working files for HTML and CSS then open the index.html file and create a basic HTML document, So first of all we’re going to change the title it’s going to be a helicopter and then link the CSS file.
<div class="container">
<div class="helicopter">
<div class="blade">
<div class="main-rotor"></div>
</div>
<div class="mast"></div>
<div class="cockpit"></div>
<div class="landing-skid landing-skid-1"></div>
<div class="landing-skid landing-skid-2"></div>
<div class="tail-cone"></div>
<div class="tail-fin"></div>
<div class="tail-rotor"></div>
</div>
</div>Start to create the HTML markup let’s open the div tag which is going to be the container then we need another class helicopter it will include all the parts of the helicopter the first one is going to be the blade which will include the main rotor, Next, we will have a mast, Next comes cockpit then we’ll have landing skids.
we’ll have two landing skids and they will have common class names landing skid and also the individual classes landing skid 1 and landing skid 2. all right after that we have tail cone then the next part is going to be tail fin and finally, we need here tail rotor.
Setting Up Default Values
Let’s move on and start to write some CSS, first of all, we’re going to start to write some reset and default styles.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
width: 100%;
height: 100vh;
background-color: lightgreen;
display: grid;
place-items: center;
}Let’s select every element using an asterisk(*), We’re going to get rid of default margin and padding let’s set both properties to zero and then also We’re going to set box sizing to border-box throughout this project, We are going to use “rem” as a measurement unit right, Where 1 rem equals 16 pixels and we want to convert 1 rem into 10 pixels so for that we need to decrease the font size of the HTML element and we have to make it 62.5 percent.
Output:
Setting Up Background Space
After setting up the default values we need to create a background by customizing the container class and helicopter class.
.container {
width: 150rem;
height: 80rem;
background: rgb(88, 179, 253)We’re going to customize the container, let’s select it and define its width and height the width is going to be 150 rem as for the height we’re going to make it 80 rem and also change the background color we’re going to use here RGB value 88,179,253, that’s it about the container for now, we’ll take care of it bit later.
Output
Setting Up Space For Helicopter
.container {
width: 150rem;
height: 80rem;
background: rgb(88, 179, 253);
display: grid;
place-items: center;
}
.helicopter {
width: 80rem;
height: 60rem;
background-color: #fff;
}
Next, we’re going to start to build the helicopter, So let’s go ahead and select the wrapper div element and define its width and height the width is going to be 80 rem as for the height we’re going to make it 60 rem and also change the background color makes it white next we’re going to place the helicopter in the center of the container so again we’re going to use CSS grid we need display grid and place items center.
Output:
Creating Blade For Helicopter
.helicopter {
width: 80rem;
height: 60rem;
background-color: #fff;
}
.helicopter div{
position: absolute;
}
.blade {
width: 40rem;
height: 2rem;
background-color: #000;
left: 20rem;
top: 15rem;
}So the first part that we’re going to create is a blade, let’s select it and define its width and height the width is going to be 40 rem as for the height we’re going to make it 2 rem and also change the background color makes it black, Set the position to absolute we will position elements according to the wrapper development, Let’s change the position of the blade we’re going to set a left property to 20 rem as for the top position is going to be 15 rem.
Output:
Setting Up Cockpit
.cockpit {
width: 20rem;
height: 10rem;
top: 18.5rem;
left: 30rem;
background-color: #000;
border-radius: 50% 40% 40% 40%;
}
.cockpit::before {
content: "";
width: 8rem;
height: 5rem;
background-color: #ccc;
position: absolute;
top: 0.2rem;
border-radius: 100% 0 40% 0;Let’s move on and customize the next part which is going to be the cockpit actually this element is going to be the entire cabin of the helicopter, we have to take care of the shape of the cockpit it’s going to be rounded and we will do that using border-radius so the top left corner is going to be 50% then top right corner will be 40% also the bottom right corner will be 40%.
after that we’re going to take care of the actual cockpits, Define width and height the width is going to be 8 rem then we need the height it’s going to be 5 rem also let’s change the background color makes it #ccc , and also let’s set position to absolute.
so now we need to change the position of the element slightly and we have to make it rounded in order to fit the cabin so let’s set-top property to 0.2 rem and then in order to make the element rounded we’re going to use again for the radius we need 100% 0 40% 0.
Output:
Setting Up Landing-skids
.landing-skid {
width: 23rem;
height: 10rem;
border-bottom: 1rem solid #000;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-radius: 0 0 2.5rem 5rem;
}
.landing-skid-1 {
top: 22rem;
left: 26rem;
}
.landing-skid-2 {
top: 20.5rem;
left: 26.5rem;
}
.landing-skid::before,
.landing-skid::after {
content: "";
width: 1rem;
height: 5rem;
background-color: #000;
position: absolute;
bottom: 0;
}
.landing-skid::before {
left: 8rem;
}
.landing-skid::after {
left: 18rem;
}Next, we’re going to customize the landing skids, we will create the actual landing skids using borders we need a border-bottom with values 1 rem solid and the color is going to be black then we need a border-left with values 1 rem solid transparent , and also we need for the right which will have the same values and finally in order to change the shape of the element, Let’s use again border radius the values are going to be 0 0 2.5 rem and 5 rem.
Let’s select landing skid one and define the top and left properties the top position is going to be 22 rem as for the left position it’s going to be 26 rem let’s duplicate this code change the class name so the top position is going to be 20.5 rem as for the left position is going to be 26.5 rem.
Output
Setting Up Tailcone
.tail-cone {
width: 25rem;
height: 2rem;
background-color: #000;
top: 22rem;
left: 47rem;
border-radius: 0 100% 100% 0;
}Here we have the tail cone let’s go ahead and change its position we’re going to the set-top property to 22 rem then the left position is going to be 47 rem and finally we’re going to change the shape of the elements using again borde radius we need here the values 0 100% 100% 0.
Output:
Setting Up Tailfin
.tail-fin {
width: 2rem;
height: 8rem;
background-color: #000;
top: 19rem;
right: 7.5rem;
border-radius: 100% 0 0 100%;
}Next, we have the tail fin let’s select it , and first of all , define the width and height the width is going to be 2 rem then the height will be 8 rem and again we need black background color okay so here we have the tail fin let’s go ahead and change its position.
let’s define the top and right properties the top position is going to be 19 rem that’s for the right position let’s make it 7.5 rem and finally let’s change the shape of the element using border-radius the values are going to be 100 0 0 and 100 percent okay so the tail fin is ready.
Output:
Setting Up Tailrotor
.tail-rotor {
width: 1rem;
height: 9rem;
background-color: #000;
top: 18.5rem;
right: 6.5rem;
animation: tailRotorAnim 0.1s infinite linear;
}Now, we have to take care of the last part of the helicopter which is the tail rotor let’s define width and height, the width is going to be 1 rem as for the height we’re going to make it 9 rem then we need to change the position let’s define the top and right properties the top position is going to be 18.5 rem and for the right property let’s set it to 6.5 rem.
Setting Up Mast And Main-rotor
.mast {
width: 1rem;
height: 2rem;
background-color: #000;
left: 39.5rem;
top: 17rem;
}
.main-rotor {
width: 5rem;
height: 2rem;
background-color: #0000;
left: 17.5rem;
}Next, we have the main router let’s define it’s within height the width is going to be 5 rem as for the height we’re going to make it 2 rem also let’s change the background color right now we’re going to use red color but then we will change it also let’s define left position make it 17.5 rem.
So before we make the helicopter fly we need to customize the mast which connects the cabin to the blade, let’s select this element , first of all, let’s define its width and height we’re going to set the width to 1 rem then the height is going to be 2 rem then change the background color makes it black and then let’s change the position we need left the property with the value 39.5 rem and then a top position with value 17 rem.
Output:
Adding Details And Animations To Helicopter
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
width: 100%;
height: 100vh;
background-color: lightgreen;
display: grid;
place-items: center;
}
.container {
width: 150rem;
height: 80rem;
background: rgb(88, 179, 253) url(images/bg.png) repeat-x;
background-size: 150rem auto;
background-position: 0 100%;
display: grid;
place-items: center;
animation: bgAnim 10s infinite linear;
border-radius: 0.5rem 100rem;
}
@keyframes bgAnim {
0% {
background-position: 0 100%;
}
100% {
background-position: 150rem 100%;
}
}
.helicopter {
width: 80rem;
height: 60rem;
position: relative;
perspective: 100rem;
transform: rotateY(-15deg);
}
.helicopter div {
position: absolute;
}
.blade {
width: 40rem;
height: 2rem;
background-color: #000;
left: 20rem;
top: 15rem;
transform: rotateX(90deg);
transform-style: preserve-3d;
animation: bladeAnim 0.1s infinite linear;
}
@keyframes bladeAnim {
0% {
transform: rotateX(90deg) rotateZ(0);
}
100% {
transform: rotateX(90deg) rotateZ(360deg);
}
}
.main-rotor {
width: 5rem;
height: 2rem;
background-color: #000;
left: 17.5rem;
transform: rotateX(-90deg);
transform-style: preserve-3d;
}
.main-rotor::before {
content: "";
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
transform: rotateY(80deg);
}
.mast {
width: 1rem;
height: 2rem;
background-color: #000;
left: 39.5rem;
top: 17rem;
}
.cockpit {
width: 20rem;
height: 10rem;
top: 18.5rem;
left: 30rem;
background-color: #000;
border-radius: 50% 40% 40% 40%;
}
.cockpit::before {
content: "";
width: 8rem;
height: 5rem;
background-color: #ccc;
position: absolute;
top: 0.2rem;
border-radius: 100% 0 40% 0;
}
.landing-skid {
width: 23rem;
height: 10rem;
border-bottom: 1rem solid #000;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-radius: 0 0 2.5rem 5rem;
}
.landing-skid-1 {
top: 22rem;
left: 26rem;
}
.landing-skid-2 {
top: 20.5rem;
left: 26.5rem;
}
.landing-skid::before,
.landing-skid::after {
content: "";
width: 1rem;
height: 5rem;
background-color: #000;
position: absolute;
bottom: 0;
}
.landing-skid::before {
left: 8rem;
}
.landing-skid::after {
left: 18rem;
}
.tail-cone {
width: 25rem;
height: 2rem;
background-color: #000;
top: 22rem;
left: 47rem;
border-radius: 0 100% 100% 0;
}
.tail-fin {
width: 2rem;
height: 8rem;
background-color: #000;
top: 19rem;
right: 7.5rem;
border-radius: 100% 0 0 100%;
}
.tail-rotor {
width: 1rem;
height: 9rem;
background-color: #000;
top: 18.5rem;
right: 6.5rem;
animation: tailRotorAnim 0.1s infinite linear;
}
@keyframes tailRotorAnim {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(360deg);
}
}Now we have to make the helicopter fly, Let’s start with the blade as we need some 3d effects for the blade For we set perspective let’s set it to 100 rem, after that, we need to rotate the blade for that we’re going to use transform with the rotate x function we need to rotate the element according to the x-direction the value is going to be 90 degrees.
we have to rotate the main rotor but before that, we need to share 3d environment for the main rotor and in order to do that we have to assign to the blade transform style with the value preserve-3d and now we can rotate the main rotor let’s use transform rotate x with a value minus 90 degrees.
After that we’re going to add a little part to the main rotor in order to achieve a much better effect we need to make the main rotor look like a cross, let’s select the main router width before city element.
let’s set the position to absolute so here we have the before suit element and we’re going to rotate it let’s use transform rotate y the value is going to be 80 degrees.
To animate the blade we need to rotate this element so let’s create keyframes the name is going to be “bladeAnim” so overall we will have two steps 0% and 100%, At 0% we need to transform rotate x function with value 90 degrees and also rotate z with 0. So throughout the animation.
we need to rotate the element according to the z-direction from 0 to 360 degrees so at 100 we need to transform rotate x with 90 degrees and rotate z with 360 degrees.
Now we have to take care of the background of the container let’s add here an image so we need a URL then a folder called images and we need to select pg.png we have to change its position we need to move it down by a 100%, Let’s create CSS keyframes with the name “bgAnim” so we will have two different steps 0 and 100 and during the animation, we need to change the position of the background so at 0%.
we’ll have the default position 0 and 100% as for the 100 the background-position is going to be 150 rem and 100 let’s run the animation we need here the name bgAnim then the duration is going to be 10 seconds and again the animation should run infinitely and also it should be linear.
Source Code Of Flying Helicopter with HTML and CSS
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Helicopter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="helicopter">
<div class="blade">
<div class="main-rotor"></div>
</div>
<div class="mast"></div>
<div class="cockpit"></div>
<div class="landing-skid landing-skid-1"></div>
<div class="landing-skid landing-skid-2"></div>
<div class="tail-cone"></div>
<div class="tail-fin"></div>
<div class="tail-rotor"></div>
</div>
</div>
</body>
</html>style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
width: 100%;
height: 100vh;
background-color: lightgreen;
display: grid;
place-items: center;
}
.container {
width: 150rem;
height: 80rem;
background: rgb(88, 179, 253) url(images/bg.png) repeat-x;
background-size: 150rem auto;
background-position: 0 100%;
display: grid;
place-items: center;
animation: bgAnim 10s infinite linear;
border-radius: 0.5rem 100rem;
}
@keyframes bgAnim {
0% {
background-position: 0 100%;
}
100% {
background-position: 150rem 100%;
}
}
.helicopter {
width: 80rem;
height: 60rem;
position: relative;
perspective: 100rem;
transform: rotateY(-15deg);
}
.helicopter div {
position: absolute;
}
.blade {
width: 40rem;
height: 2rem;
background-color: #000;
left: 20rem;
top: 15rem;
transform: rotateX(90deg);
transform-style: preserve-3d;
animation: bladeAnim 0.1s infinite linear;
}
@keyframes bladeAnim {
0% {
transform: rotateX(90deg) rotateZ(0);
}
100% {
transform: rotateX(90deg) rotateZ(360deg);
}
}
.main-rotor {
width: 5rem;
height: 2rem;
background-color: #000;
left: 17.5rem;
transform: rotateX(-90deg);
transform-style: preserve-3d;
}
.main-rotor::before {
content: "";
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
transform: rotateY(80deg);
}
.mast {
width: 1rem;
height: 2rem;
background-color: #000;
left: 39.5rem;
top: 17rem;
}
.cockpit {
width: 20rem;
height: 10rem;
top: 18.5rem;
left: 30rem;
background-color: #000;
border-radius: 50% 40% 40% 40%;
}
.cockpit::before {
content: "";
width: 8rem;
height: 5rem;
background-color: #ccc;
position: absolute;
top: 0.2rem;
border-radius: 100% 0 40% 0;
}
.landing-skid {
width: 23rem;
height: 10rem;
border-bottom: 1rem solid #000;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-radius: 0 0 2.5rem 5rem;
}
.landing-skid-1 {
top: 22rem;
left: 26rem;
}
.landing-skid-2 {
top: 20.5rem;
left: 26.5rem;
}
.landing-skid::before,
.landing-skid::after {
content: "";
width: 1rem;
height: 5rem;
background-color: #000;
position: absolute;
bottom: 0;
}
.landing-skid::before {
left: 8rem;
}
.landing-skid::after {
left: 18rem;
}
.tail-cone {
width: 25rem;
height: 2rem;
background-color: #000;
top: 22rem;
left: 47rem;
border-radius: 0 100% 100% 0;
}
.tail-fin {
width: 2rem;
height: 8rem;
background-color: #000;
top: 19rem;
right: 7.5rem;
border-radius: 100% 0 0 100%;
}
.tail-rotor {
width: 1rem;
height: 9rem;
background-color: #000;
top: 18.5rem;
right: 6.5rem;
animation: tailRotorAnim 0.1s infinite linear;
}
@keyframes tailRotorAnim {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(360deg);
}
}And this is how you can create Flying Helicopter with HTML and CSS….
