Merry Christmas | Awesome 3D Card Rotate On Mousemove - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to design an awesome 3D card and how to rotate it on mouse move with mouseover and mouse out events using HTML, CSS, and Pure Javascript. On mouse move, the card will be rotated according to the cursor moving direction. When the mouse over the card, the card elements (text, images) will be transformed into 3d layers. When the mouse out all the effects on mouse move and mouseover events will be reset on the card as it looks in the first place. Hope this tutorial will be helpful to improve your javascript knowledge. Let's see how to design this awesome 3D card.

First, create the index.html file and the style.css file. After you created these two files then start the HTML part of the card in the index.html file as you can see in the video. After the HTML part is complete, then link the style.css file to the index.html file in between <head></head> tags to start the CSS styling part. After you link the style.css file to the index.html file, then go to the style.css file and do the styling part on the card as you can see in the video. After the styling part is completed then go to the index.html file for the Javascript part. In the index.html file before the body close tag open <script></script> tags and complete the Javascript part of the card mouse move, mouse over, and mouse out events between the script tags as you can see in the video. So that's all, Hope this tutorial will be helpful to improve your javascript knowledge with the mouse events.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Merry Christmas | Amazing 3D Card Rotate On Mousemove</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<div class="container">
      <div class="card">
        <div class="card-bg">
          <img src="card-bg.jpg" alt="">
        </div>
        <div class="title">
          <h2>Merry</h2>
          <h1>Christmas</h1>
          <h3>& Happy New Year</h3>
        </div>
        <div class="images">
          <img src="santa.png" class="santa" alt="">
          <img src="tree.png" class="tree" alt="">
        </div>
      </div>
    </div>

//card rotate on mouse move
    container.addEventListener("mousemove", (rotate) => {
      let x = (innerWidth / 2 - rotate.pageX) / 15;
      let y = (innerHeight / 2 - rotate.pageY) / 15;

card.style.transform = "rotateY(" + x + "deg) rotateX(" + y + "deg)";
    });

//card effects on mouse over the card
    container.addEventListener("mouseover", () => {
      title.style.transform = "translate3d(0, 0, 160px)";
      santa.style.transform = "translate3d(0, 0, 220px)";
      tree.style.transform = "translate3d(0, 0, 120px)";
      card.style.transition = "all 0.1s ease";
    });

//card back to normal when mouse out
    container.addEventListener("mouseout", () => {
      card.style.transform = "rotateY(0deg) rotateX(0deg)";
      card.style.transition = "all 0.5s ease";
      title.style.transform = "translate3d(0, 0, 0)";
      santa.style.transform = "translate3d(0, 0, 0)";
      tree.style.transform = "translate3d(0, 0, 0)";
    });
    </script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;700;800&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(bg.jpg)no-repeat;
  background-size: cover;
  background-position: center;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 750px;
  perspective: 1200px;
}

.card{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 600px;
  transform-style: preserve-3d;
}

.card .card-bg{
  position: absolute;
}

.card .card-bg img{
  z-index: 1;
  width: 100%;
  border-radius: 10px;
}

.card .title{
  z-index: 2;
  position: absolute;
  top: 50px;
  text-align: center;
  line-height: 40px;
  transition: all 0.3s ease-out;
}

.card .title h2{
  font-family: "Eczar", serif;
  font-size: 25px;
  text-transform: uppercase;
}

.card .title h1{
  font-family: "Berkshire Swash", cursive;
  font-size: 60px;
  letter-spacing: 2px;
}

.card .title h3{
  font-family: "Eczar", serif;
  font-size: 20px;
  text-transform: uppercase;
  margin-top: 10px;
}

.card .images{
  z-index: 2;
}

.card .images .santa{
  z-index: 3;
  position: absolute;
  width: 400px;
  transition: all 0.3s ease-out;
}

.card .images .tree{
  z-index: 2;
  width: 400px;
  transition: all 0.3s ease-out;
}

Download Source Files

If the download didn't start automatically, click here.

Wednesday, January 13, 2021

Merry Christmas | Awesome 3D Card Rotate On Mousemove - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Merry Christmas | Awesome 3D Card Rotate On Mousemove - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form