<html><head>
        <title>Trig.js Rotating Cube on Scroll</title>

        <!-- Trig JS -->
        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

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

        <!-- Mobile viewport meta tag -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
    </head>
    <body class="trig-scroll-up trig-scroll-25">
        <div class="container">
            <div class="pinContainer" data-trig data-trig-degrees="true" data-trig-min="-200" data-trig-max="200">
              <div class="cubeContainer">
                  <div id="cube" class="cube">
                      <div class="cube-face front">
                          <span>Front</span>
                      </div>
                      <div class="cube-face back">
                          <span>Back</span>
                      </div>
                      <div class="cube-face left">
                          <span>Left</span>
                      </div>
                      <div class="cube-face right">
                          <span>Right</span>
                      </div>
                      <div class="cube-face top">
                          <span>Top</span>
                      </div>
                      <div class="cube-face bottom">
                          <span>Bottom</span>
                      </div>
                  </div>
              </div>
            </div>
            <div class="container">
                <div class="alignCenter">
                    <div>3D Cube Spinning On Scroll</div>
                </div>
            </div>
        </div>
    

</body></html>
body {
  margin: 0;
  padding: 0;
  background-color: #282828;
  color: #fff;
  font-family: 'Space Mono', monospace;
}

.pageContainer {
  max-width: 100%;
  width: 100%;
}

.container {
  width: 80vw;
  min-height: 100vh;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pinContainer {
  width: 80vw;
  min-height: 400vh;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.cube {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.5s ease-out;
}

.cubeContainer{
  display:block;
  position:sticky;
  top: 30%;
}

.cube-face {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: rgba(255, 87, 51, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 24px;
  color: white;
  box-shadow: 0 0 10px rgba(255, 87, 51, 0.5);
  transition: transform 0.3s ease-out;
}

.cube .front  { 
  transform: rotateY(  0deg) translateZ(75px);
}
.cube .back   { 
  transform: rotateY(180deg) translateZ(75px); 
}
.cube .left   { 
  transform: rotateY(-90deg) translateZ(75px); 
}
.cube .right  { 
  transform: rotateY( 90deg) translateZ(75px); 
}
.cube .top    { 
  transform: rotateX( 90deg) translateZ(75px); 
}
.cube .bottom { 
  transform: rotateX(-90deg) translateZ(75px); 
}

.cube {
  transform: rotateX(calc(var(--trig-deg) - 60deg)) rotateY(var(--trig-deg-reverse));
}

.cube:hover{
  transform: rotateX(calc(var(--trig-deg) - 60deg)) rotateY(var(--trig-deg-reverse)) scale3d(1.6, 1.6, 1.6);
}

.cube span {
  font-size: 24px;
  font-family: 'Bebas Neue', cursive;
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.