cosas2

by jpeter06

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">
<div class="hidden">
  <svg>
    <defs>
      <path id="graph" d="m 15.566574,30.693963 v 57.976092 h 74.45813 V 85.956453 H 28.169082 c 3.247668,-1.029134 6.684874,-2.25613 8.825308,-3.506794 4.722483,-2.75937 10.585508,-8.541953 14.841044,-13.229743 4.439785,-4.890756 5.178549,-9.982132 9.751049,-15.436469 0.214298,-0.255624 0.437037,-0.486161 0.66382,-0.702525 0.90531,2.67893 1.695532,5.327413 2.708832,7.511984 2.489884,5.367943 5.010199,10.765482 7.779737,13.55264 2.533132,2.549246 9.165717,8.928841 16.913098,9.185849 l 0.07211,-2.17014 c -6.5525,-0.217372 -13.004401,-6.091406 -15.444425,-8.54695 -2.203609,-2.21763 -4.869237,-7.586624 -7.350268,-12.935478 -0.970808,-2.092962 -1.728281,-4.952971 -2.745946,-7.945163 1.569563,-0.745246 3.296992,-0.852127 5.024248,-0.539219 2.75325,0.498773 5.414139,2.182585 6.81317,4.021625 1.647867,2.166141 3.990632,4.725558 6.451037,6.781357 2.460406,2.055795 4.968456,3.705508 7.426619,3.661614 l -0.03817,-2.170672 c -1.305989,0.02332 -3.698721,-1.236195 -5.996119,-3.155797 -2.297401,-1.919597 -4.571247,-4.40036 -6.115947,-6.430888 -1.79354,-2.357628 -4.826145,-4.240568 -8.154065,-4.843448 -0.831979,-0.150718 -1.687616,-0.213359 -2.544997,-0.174436 -1.217323,0.05526 -2.436057,0.319432 -3.592157,0.828184 -1.374643,-3.578839 -3.27042,-7.147321 -6.491333,-9.657204 -2.440148,-1.901478 -5.065271,-2.779072 -7.560761,-2.813814 -0.831833,-0.01159 -1.649956,0.07206 -2.441077,0.240714 -3.164486,0.67463 -5.895329,2.693514 -7.614843,5.462732 -1.808514,2.912548 -2.869052,8.236914 -3.997768,13.442356 -0.564357,2.602722 -1.118922,5.152866 -1.703558,7.258015 -0.584635,2.105145 -1.254524,3.785226 -1.781498,4.477071 -2.749557,3.609832 -5.966788,6.595827 -13.586572,6.646685 V 30.693963 Z m 33.813468,8.712373 c 2.009997,0.01867 4.144138,0.719666 6.251148,2.361546 2.844489,2.216556 4.526685,5.593141 5.843951,9.122222 -0.547664,0.424099...

CSS

html, body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  overflow:hidden;
  --molino-fill: rgb(255, 255, 255);
  --molino-stroke: rgb(75, 74, 74);
  font-family: "Segoe UI",'Quicksand', sans-serif;
}

.hidden{ display:none}

/** SIZES **/
.wh100{
  width:100%;
  height:100%;
  position:relative;
  font-size: 30px;
}
.sqrVW30{
  width:3.5em;
  height:3.5em;
  position:relative;
}

.margin5{
  margin:5%;
}

.flexh{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:10vw;
}

/** FONTS **/
.fontW{
  color: white;
  text-decoration: none;
  font-weight: 300;
  text-shadow: #000 1px 0 10px;
}

.font9{
  font-size: 1em;
}
.font7{
  font-size: 0.75em;
}
.font5{
  font-size: 0.6em;
}
svg text{
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
}


/** TILT ELEMENTS **/
.tiltParent{
  width:100%;
  height:100%;
  transform-style: preserve-3d;
}

.tiltChild{
  width:100%;
  height:100%;
  position:absolute;
  flex-direction:column;
  position:absolute;
  display:flex;
}

.tiltChildText{
  width:100%;
  height:50%;
  position:absolute;
  flex-direction:column;
  position:absolute;
  display:flex;
}

.tiltChild.text{
  height:50%;
  justify-content: center;
  align-items: center;
}

.tiltChild.textN {
    align-items: center;
}

.tiltParent:after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-shadow: 0 40px 40px 0 rgb(51 51 51 / 30%);
    z-index: -2;
    -webkit-transform: translateZ(-2px);
    transform: translateZ(-2px);
    -webkit-transition: .3s;
    transition: .3s;
}

/** isometric **/
.iso{
  transform-style: preserve-3d;
  transform:perspective(1000px)  rotateX(-30deg) rotateY(-45deg) rotateZ(0deg);
  transition: transform 0.4s;
}
.isometric{
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}
.iso2{
  transform-style: preserve-3d;
  transform:perspective(1000px)  rotateX(-30deg) rotateY(45deg) rotateZ(0deg);
  transition: transform...