<div id="christmascard">
  <div class="card">
    <div class="tree">
      <div class="tree1"></div>
      <div class="balls"></div>
      <div class="balls1"></div>
      <div class="sparkles">✨</div>
      <div class="sparkles1">✨</div>
    </div>
    <div class="wishes">
      <div class="merry">Merry</div>
      <div class="christmas">CHRISTMAS</div>
      <div class="everyone">Everyone</div>
      <div class="lena">Lena xxx</div>
  </div>
    <div class="snowfall">
      <div class="snowflake1">❄</div>
      <div class="snowflake2">❄</div>
      <div class="snowflake3">❄</div>
      <div class="snowflake4">❄</div>
      <div class="snowflake5">❄</div>
      <div class="snowflake6">❄</div>
      <div class="snowflake7">❄</div>
      <div class="snowflake8">❄</div>
      <div class="snowflake9">❄</div>
      <div class="snowflake10">❄</div>
    </div>
</div>
</div>
body {
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #197278;
  height: 100vh;  
}

#christmascard {
  position: relative;  
  cursor: pointer;
}

.card {
  z-index:1;
  position: relative;
  width: 500px;
  height: 400px;
  border: 10px solid #fff;
  box-shadow: inset 5px 5px 1px rgba(0,0,0,0.07), 10px 10px 7px rgba(0,0,0,0.3);
  background-color: #c44536;
  overflow:hidden;
  
}

.tree {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #43291f;
  left: 245px;
  top:120px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom: 45px solid #6a994e;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  width:0;
  height:0;
  left:-35px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  border-bottom: 45px solid #a7c957;
  border-right: 40px solid transparent;
  top:-30px;
  left:5px;
  width:0;
  height:0;
}

.tree1 {
  position: absolute;
  border-bottom: 40px solid #6a994e;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  width:0;
  height:0;
  left:-30px;
  top:-55px;
}

.tree1:before {
  content:"";
  position: absolute;
  border-bottom: 40px solid #a7c957;
  border-right: 35px solid transparent;
  top:0;
  left:0;
  width:0;
  height:0;
}

.tree1:after {
  content:"";
  position: absolute;
  border-bottom: 30px solid #6a994e;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-15px;
  left:-25px;
  width:0;
  height:0;
}

.balls {
  position: absolute;
  border-bottom: 30px solid #a7c957;
  border-right: 25px solid transparent;
  width:0;
  height:0;
  left:5px;
  top:-70px;
}

.balls:before {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:14px;
  left:2px;
}

.balls:after {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:40px;
  left:-15px;
}

.balls1 {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  z-index:2;
  left:-10px;
}

.balls1:before {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  content:"";
  left:20px;
  top:-25px;
}

.balls1:after {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  content:"";
  left:25px;
  top:-5px;
}

.sparkles {
  position: absolute;
  z-index:2;
  font-size:25px;
  left:-50px;
  top:-5px;
}

.sparkles1 {
  position: absolute;
  z-index:2;
  font-size:23px;
  top:-63px;
  left:18px;
}

.wishes {
  position: absolute;
  top:200px;
  text-align: center;
  left:140px;
  top:180px;
  color: #fff;
  line-height: 50px;  
}

.merry {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.everyone {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.christmas {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.lena {
  font-family: 'Brush Script MT', cursive;
  font-size: 25px;
}

.snowfall {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5, .snowflake6, .snowflake7, .snowflake8, .snowflake9, .snowflake10 {
  color: white;
  position: absolute;
}

.snowflake1 {
  font-size:25px;
  left:30px;
  animation: fall 10s linear infinite;
}

.snowflake2 {
  font-size:15px;
  left:30px;
  animation: fall2 6s linear infinite;
}

.snowflake3 {
  font-size:19px;
  left:230px;
  animation: fall3 7s linear infinite;
}

.snowflake4 {
  font-size:24px;
  left:250px;
  animation: fall4 8s linear infinite;
}

.snowflake5 {
  font-size:22px;
  left:333px;
  animation: fall2 6s linear infinite;
}

.snowflake6 {
  font-size:27px;
  left:400px;
  animation: fall 6.5s linear infinite;
}

.snowflake7 {
  font-size:20px;
  left:450px;
  animation: fall5 8.5s linear infinite;
}

.snowflake8 {
  font-size:18px;
  left:170px;
  animation: fall3 7.5s linear infinite;
}

.snowflake9 {
  font-size:29px;
  left:120px;
  animation: fall4 9.5s linear infinite;
}

.snowflake10 {
  font-size:27px;
  left:290px;
  animation: fall5 5s linear infinite;
}

@keyframes fall {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-10px);}
}

@keyframes fall2 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

@keyframes fall3 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(50px);}
}

@keyframes fall4 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(30px);}
}

@keyframes fall5{
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}
$(function(){
    var card = $("#christmascard");
    card.on('mousemove', function (event) {
    var y = event.clientY - $(this).offset().top + $(window).scrollTop();
    var x = event.clientX - $(this).offset().left + $(window).scrollLeft();
            
    var rY = turn(x, 0, $(this).width(), -20, 20);
    var rX = turn(y, 0, $(this).height(), -40, 40);
    
        $(this).children(".card").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });
        
    function turn(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js