tilt menu

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="aspaDef1" vector-effect="non-scaling-stroke" d="M -0.3748171,-1.5789094 8.1389332,-1.8943773 8.8686655,-3.8558868 42.606797,-0.53145135 42.44999,3.1288874 0.68708671,1.9916715 Z" ></path>
      <path id="mountain" vector-effect="non-scalin-stroke" d="M -0.06399393,11.622768 C 0.70206519,10.820655 3.4911075,7.8306893 5.9231882,7.8430059 c 2.4320807,0.012317 6.7954108,4.7199601 8.9075158,4.7247021 2.232007,0.005 4.136274,-2.196989 6.365159,-2.078869 1.921695,0.101841 3.645311,1.555114 4.795247,2.551339 1.149935,0.996225 2.267857,2.645834 2.267857,2.645834 l -31.8497408,4e-6 c 0,0 2.76072076,-3.261134 3.52677987,-4.063248 z"></path>
            <path id="mountain2" vector-effect="non-scalin-stroke" d="m 24.70508,11.622768 c -0.766059,-0.802113 -3.555102,-3.7920787 -5.987182,-3.7797621 -2.432081,0.012317 -6.795411,4.7199601 -8.9075163,4.7247021 -2.232007,0.005 -4.136274,-2.196989 -6.365159,-2.078869 -1.921695,0.101841 -3.64531096,1.555114 -4.795247,2.551339 -1.149935,0.996225 -2.267857,2.645834 -2.267857,2.645834 l 31.8497413,4e-6 c 0,0 -2.760721,-3.261134 -3.52678,-4.063248 z"></path>
      <polygon  id="torretaDef" points="-1.7,0,1.7,0,4,110,-4,110" vector-effect="non-scaling-stroke" ></polygon>
      <g  id="aspas"><use  href="#aspaDef1"></use><use  href="#aspaDef1" transform="rotate(120,0,0) "></use><use  href="#aspaDef1" transform="rotate(240,0,0) "></use><circle  r="5" vector-effect="non-scaling-stroke"></circle>      </g>
      <g id="molino" class="molino anim" transform="translate(25,50) scale(0.6)">
        <use _ngcontent-dfg-c95="" href="#torretaDef"></use>
        <use _ngcontent-dfg-c95="" href="#aspas" class="aspas">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate"
          from="360 8.4 9.5" to="0 8.4 9.5" dur="2.5s" additive="sum" 
         ...

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);
    --hierro-fill: rgb(255, 255, 255);
    --molino-sombra-fill: #aaa;
    font-size: 1.125em;
    font-family: "Segoe UI",'Quicksand', sans-serif;
}

.hidden{ display:none}

.wh100{
  width:100%;
  height:100%;
  margin:10%;
}

.flexh{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:20px;
}

.posAbs{
  position:absolute;
}
.rotX60{
  transform: perspective(1000px)  rotateX(60deg);
}
.rotxMolino{
  transform: rotateX(306deg);
}

.vh30{
    width:30vh;
    height:30vh;
    background:tan;
}

.w30c2{
  width:30vh;
  height:30vh;
  background:tan;
  border-radius: 20px;
  transform-style: preserve-3d;
}

.w30c{
  width:30vh;
  height:30vh;
  background:transparent;
  transform-style: preserve-3d;
}

.w30, .w30r{
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  display:flex;
  align-items: center;
  justify-content: center;
  position:relative;
}

.fontW{
  color: white;
  font-size: 3.16667rem;
  line-height: 1.26316;
  text-decoration: none;
  font-weight: 300;
  text-shadow: #000 1px 0 10px;
}

.fontR{
  color: #f00;
  font-size: 3.16667rem;
  line-height: 1.26316;
  text-decoration: none;
  font-weight: 300;
  text-shadow: #000 1px 0 10px;
}

.tchild0{
  width:100%;
  height:100%;
  flex-direction:column;
  transform: translateZ(10px);
  position:absolute;
  display:flex;
  align-items: center;
  justify-content: center;
}

.tchild{
  width:100%;
  height:100%;
  flex-direction:column;
  transform: translateZ(20px);
  position:absolute;
    display:flex;
  align-items: center;
  justify-content: center;
}

.tchild2{
  width:100%;
  height:100%;
  transform: translateZ(30px);
  position:absolute;
}

/***/
.molino {
    fill: var(--molino-fill);
    stroke: var(--molino-stroke);
    stroke-width: var(--figs-stroke-width);
}
.mountain{
    fill: green;
    stroke:...