Apollo.ai Products Cube

apollo-ai-products-cube.markdown

Apollo.ai Products Cube

From Intro to CSS 3D Transforms

A Pen by Paul Weber on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="svg2"
   xml:space="preserve"
   width="200"
   viewBox="0 0 1122.52 200"
   sodipodi:docname="APOLLO-WHITE-LOGO-3-modified.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   height="200"><metadata
     id="metadata8"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs6"><clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath18"><path
         d="M 0,595.28 H 841.89 V 0 H 0 Z"
         id="path16"
         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
     pagecolor="#000000"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1052"
     id="namedview4"
     showgrid="false"
     inkscape:zoom="0.29733907"
     inkscape:cx="-112.2594"
     inkscape:cy="-639.00495"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="g10"
     fit-margin-top="20.3"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" /><g
     id="g10"
     inkscape:groupmode="layer"
     inkscape:label="APOLLO-WHITE-LOGO-3"
     transform="matrix(1.3333333,0,0,-1.3333333,-63.835486,802.35562)"><g
       id="g12"
       transform="matrix(4.9362747,0,0,4.9362747,-1560.2947,-1694.5843)"><g
         id="g14"
         clip-path="url(#clipPath18)"><g
           id="g20"
           transform="translate(401.5869,472.5398)"><path
             d="m 0,0 c -0.091,0.091 -0.183,0.182 -0.274,0.273 -4.202,-2.116 -8.414,-4.213 -12.589,-6.379 -0.393,-0.205 -0.657,-0.814 -0.815,-1.29 -2.01,-6.015 -3.992,-12.04 -5.975,-18.063 -0.112,-0.339 -0.174,-0.694 -0.33,-1.331 4.481,2.254 8.696,4.345 12.869,6.516 0.427,0.223 0.704,0.895 0.881,1.416 1.56,4.599 3.087,9.21 4.612,13.82 C -1.066,-3.363 -0.539,-1.679 0,0 m 35.148,-45.178 c 1.988,5.944 3.742,11.544 5.753,17.051 0.895,2.447 0.86,4.484 -0.49,6.782 -1.89,3.216 -3.411,6.648 -5.173,10.151 -0.203,-0.458 -0.341,-0.708 -0.428,-0.974 -1.929,-5.79 -3.791,-11.602 -5.818,-17.357 -0.548,-1.557 -0.423,-2.808 0.349,-4.197 1.051,-1.891 1.951,-3.866 2.926,-5.8 0.901,-1.787 1.817,-3.568 2.881,-5.656 M 31.139,35.211 C 30.569,34.942 30.134,34.747 29.709,34.532 24.747,32.031 19.806,29.488 14.811,27.055 13.668,26.499 13.061,25.786 12.668,24.587 9.076,13.62 5.419,2.672 1.784,-8.281 c -1.313,-3.96 -2.618,-7.922 -3.961,-11.983 8.996,-2.983 17.859,-5.922 26.65,-8.836 0.205,0.282 0.287,0.352 0.316,0.44 5.044,15.204 10.089,30.408 15.107,45.62 0.118,0.356 0.059,0.867 -0.113,1.208 -2.838,5.641 -5.707,11.266 -8.644,17.043 m -58.728,-70.648 c 2.097,6.355 4.064,12.333 6.044,18.305 1.378,4.158 2.807,8.299 4.138,12.471 0.336,1.055 0.888,1.714 1.877,2.201 5.449,2.689 10.863,5.452 16.313,8.138 0.988,0.487 1.538,1.137 1.879,2.192 2.149,6.634 4.389,13.239 6.537,19.875 0.386,1.193 1.018,1.923 2.158,2.485 6.747,3.324 13.454,6.732 20.176,10.107 0.464,0.233 0.946,0.429 1.55,0.701 0.621,-1.229 1.201,-2.383 1.787,-3.533 3.085,-6.061 6.15,-12.132 9.281,-18.169 0.488,-0.938 0.577,-1.736 0.24,-2.731 -2.298,-6.788 -4.523,-13.601 -6.844,-20.381 -0.362,-1.058 -0.276,-1.893 0.213,-2.853 2.778,-5.456 5.538,-10.922 8.227,-16.422 0.32,-0.654 0.42,-1.618 0.199,-2.303 -3.273,-10.114 -6.617,-20.206 -9.95,-30.301 -0.056,-0.173 -0.19,-0.321 -0.402,-0.665 -1.256,2.489 -2.445,4.84 -3.629,7.194 -2.41,4.795 -4.788,9.607 -7.262,14.37 -0.33,0.637 -1.062,1.258 -1.743,1.49 -8.885,3.021 -17.788,5.99 -26.71,8.899 -0.675,0.22 -1.634,0.094 -2.286,-0.227 -6.67,-3.281 -13.304,-6.637 -19.95,-9.97 -0.504,-0.253 -1.019,-0.483 -1.843,-0.873"
             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
             id="path22"
             inkscape:connector-curvature="0" /></g><g
           id="g24"
           transform="translate(471.9961,443.2932)"><path
             d="m 0,0 c 1.218,0.319 1.565,-0.466 1.576,-1.25 0.043,-3.033 0.367,-6.13 -0.118,-9.088 -2.056,-12.529 -10.129,-20.23 -21.121,-25.372 -6.169,-2.886 -12.736,-4.286 -19.494,-5.012 -7.271,-0.781 -14.519,-0.641 -21.721,0.384 -18.015,2.563 -34.334,9.231 -48.358,20.96 -7.704,6.442 -13.948,14.108 -17.488,23.674 -5.053,13.66 -1.622,26.388 9.524,35.756 6.607,5.552 14.359,8.573 22.683,10.316 6.904,1.445 13.895,1.687 21.079,1.046 -0.542,-0.246 -1.072,-0.667 -1.63,-0.707 -2.316,-0.168 -4.643,-0.17 -6.96,-0.325 -10.981,-0.736 -21.342,-3.418 -30.299,-10.136 -6.622,-4.968 -10.496,-11.596 -11.415,-19.89 -1.057,-9.534 2.345,-17.798 7.617,-25.347 6.923,-9.912 16.437,-16.821 27.089,-22.296 8.681,-4.462 17.853,-7.464 27.412,-9.266 6.487,-1.223 13.078,-1.611 19.657,-1.182 9.488,0.617 18.573,2.847 26.813,7.82 7.486,4.518 12.787,10.769 14.602,19.478 0.574,2.751 0.396,5.661 0.547,8.499 C 0.028,-1.314 0,-0.688 0,0"
             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
             id="path26"
             inkscape:connector-curvature="0" /></g><g
           id="g28"
                                                       transform="translate(205.3311,302.132)" /></g></g></g></svg></div>
    <div class="cube__face text cube__face--back"><a href="https://www.apollo.ai/cluster">Article Clustering</a></div>
    <div class="cube__face text cube__face--right"><a href="https://www.apollo.ai/auto-abstract">Auto Abstract</a></div>
    <div class="cube__face text cube__face--left"><a href="https://www.apollo.ai/auto-abstract">PDF Splitting</a></div>
    <div class="cube__face text cube__face--top"><a href="https://www.apollo.ai/auto-abstract">Custom Apps</a></div>
    <div class="cube__face text cube__face--bottom"><a href="https://www.apollo.ai/auto-abstract">Custom <br />AI</a></div>
  </div>
</div>
<p class="radio-group">
  <label>
    <input type="radio" name="rotate-cube-side" value="front" checked /> Apollo.ai
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="right" /> Right Auto Abstract
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="back" /> Back Clustering
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="left" /> Left PDF Segmentation
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="top" /> Top Custom Apps
  </label>
  <label>
    <input type="radio" name="rotate-cube-side" value="bottom" />Bottom Custom AI
  </label>
</p>

script.js

var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';

function changeSide(side) {
  if(side && side.length > 0) {
    var showClass = 'show-' + side;
  } else {
    var checkedRadio = radioGroup.querySelector(':checked');
    var showClass = 'show-' + checkedRadio.value;
  }
  if ( currentClass ) {
    cube.classList.remove( currentClass );
  }
  cube.classList.add( showClass );
  currentClass = showClass;
}
// set initial side
changeSide();

radioGroup.addEventListener( 'change', changeSide );

setInterval(function() {
  var index = Math.floor(Math.random() * 6);
  var sides = ['front', 'back', 'top', 'bottom', 'left', 'right'];
  changeSide(sides[index]);
}, 10000);

style.css

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

* { box-sizing: border-box; }

body { font-family: Roboto; background-color: white; }

.scene {
  width: 200px;
  height: 200px;
  margin: 80px;
  perspective: 800px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube.show-front  { 
transform: translateZ(-100px) rotate3d(1,-1,-1, 45deg);
}
.cube.show-right  { transform: translateZ(-100px) rotate3d(-1,-1,-1, 90deg); }
.cube.show-back   {   transform: translateZ(-100px) rotate3d(0.1, 1, 0.2, 210deg); }
.cube.show-left   {   transform: translateZ(-100px) rotate3d(0.5, 1, 0.2, 100deg);}
.cube.show-top    { transform: translateZ(-100px) rotate3d(1,-1,1, 270deg); }
.cube.show-bottom { transform: translateZ(-100px) rotate3d(-1,-1,-1, 210deg); }

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(52, 132, 161, 0.9);
  color: white;
  text-align: center;
  background: rgba(72, 182, 191, 0.9);
}

.cube__face.text {
  padding: 30px;
}

.cube__face a {
  color: #fff;
  text-decoration: none;
  line-height: 70px;
  font-size: 36px;
  text-align: center;
}

.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(100px) rotateZ(90deg);}
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(100px) rotateZ(90deg); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px) rotateZ(270deg); }

label { margin-right: 10px; }