CSS 3D Animation

In this tutorial I will show you how to create a simple 3D interaction on you Squarespace element through CSS and Javascript. 
 

 

index.js

$(function(){
    var heroContent = $(".heroContent");
    card.on('mousemove', function (e) {
        var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
        var y = e.clientY - $(this).offset().top + $(window).scrollTop();

        var rY = map(x, 0, $(this).width(), -17, 17);
        var rX = map(y, 0, $(this).height(), -17, 17);

        $(this).children(".image").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });

    card.on('mouseenter', function () {
        $(this).children(".image").css({
            transition: "all " + 0.05 + "s" + " linear",
        });
    });

    card.on('mouseleave', function () {
        $(this).children(".image").css({
            transition: "all " + 0.2 + "s" + " linear",
        });

        $(this).children(".image").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
    });

    function map(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});
 

code-injection.html

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<!--CHANGE: site-id, javascript filename-->
<script src="https://css-3d.squarespace.com/s/index.js"></script>
 

main.html

<!--CSS-->
<style>
#heroSection{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 550px;
  width:800px;
}


.heroContent{
  width: 100%;
  height: 100%;
  perspective: 2000px;
  position: relative;
  margin-left:10px;

}

.image{
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(10deg);

}

.image.first{
  /*CHANGE: sited-id, image filename*/
  background-image: url("https://site-id/s/file-name.png");
  background-repeat:no-repeat;

}
</style>


<!--HTML-->
<div id="heroSection">

  <!--Parent-->
    <div class="heroContent">
      <!--Child-->
      <div class="image first">

    </div>
      </div>
  </div>