Trig.js Example - 3D Flip

HTML

<html>
    <head>
        <title>Trig.js Example - 3D Flip</title>
        
        <!-- Trig JS -->
        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

        <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono&display=swap" rel="stylesheet">
        <!--End Fonts -->

        <!-- Mobile viewport meta tag -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    </head>
    <body>
        <div class="pageContainer">

            <div class="container">

                <h1 id="flip" class="alignCenter" data-trig-max="200" data-trig-degrees="true" data-trig>Trig.JS 3D flip</h1>

            </div>
            
            <div class="container">

                <div class="alignCenter"><div>An iDev Games Production</div></div>

            </div>
            
        </div>
    </body>
</html>

CSS

body{
  margin:0px;
  padding:0px;
  background-color:#060606;
  color:#FFF;
  font-family: 'Space Mono', monospace;
}
.pageContainer{
  max-width:100%;
  width:100%;
  overflow:hidden;
}
.container{
  width:80vw;
  min-height:200vh;
  position:relative;
  margin:auto;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.presents{
  font-size:24px;
}
h1{
  font-family: 'Bebas Neue', cursive;
  color: #FFF;
  text-shadow: 2px 2px 2px #000000;
  font-size:72px;
}
#flip{
  perspective-origin: 25% 75%;
  transform-style: preserve-3d;
  transform: rotate3d(1, 0.1, 0.1, var(--trig-deg));
  transition: transform ease-out 0.3s;
}