Difference between revisions of "Template:AFCM-Egypt/header"

Line 7,284: Line 7,284:
 
#afcmcontrols-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
 
#afcmcontrols-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
 
#afcmcontrols-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
 
#afcmcontrols-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
 +
 +
  @-webkit-keyframes spincube {
 +
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
 +
    16%      { -webkit-transform: rotateY(-90deg);                          }
 +
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
 +
    50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);          }
 +
    66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg);          }
 +
    83%      { -webkit-transform: rotateX(90deg);                            }
 +
  }
 +
 +
  @keyframes spincube {
 +
    from,to {
 +
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 +
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 +
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 +
    }
 +
    16% {
 +
      -moz-transform: rotateY(-90deg);
 +
      -ms-transform: rotateY(-90deg);
 +
      transform: rotateY(-90deg);
 +
    }
 +
    33% {
 +
      -moz-transform: rotateY(-90deg) rotateZ(90deg);
 +
      -ms-transform: rotateY(-90deg) rotateZ(90deg);
 +
      transform: rotateY(-90deg) rotateZ(90deg);
 +
    }
 +
    50% {
 +
      -moz-transform: rotateY(-180deg) rotateZ(90deg);
 +
      -ms-transform: rotateY(-180deg) rotateZ(90deg);
 +
      transform: rotateY(-180deg) rotateZ(90deg);
 +
    }
 +
    66% {
 +
      -moz-transform: rotateY(-270deg) rotateX(90deg);
 +
      -ms-transform: rotateY(-270deg) rotateX(90deg);
 +
      transform: rotateY(-270deg) rotateX(90deg);
 +
    }
 +
    83% {
 +
      -moz-transform: rotateX(90deg);
 +
      -ms-transform: rotateX(90deg);
 +
      transform: rotateX(90deg);
 +
    }
 +
  }
 +
 +
  .cubespinner {
 +
    -webkit-animation-name: spincube;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    -webkit-animation-iteration-count: infinite;
 +
    -webkit-animation-duration: 12s;
 +
 +
    animation-name: spincube;
 +
    animation-timing-function: ease-in-out;
 +
    animation-iteration-count: infinite;
 +
    animation-duration: 12s;
 +
 +
    -webkit-transform-style: preserve-3d;
 +
    -moz-transform-style: preserve-3d;
 +
    -ms-transform-style: preserve-3d;
 +
    transform-style: preserve-3d;
 +
 +
    -webkit-transform-origin: 60px 60px 0;
 +
    -moz-transform-origin: 60px 60px 0;
 +
    -ms-transform-origin: 60px 60px 0;
 +
    transform-origin: 60px 60px 0;
 +
  }
 +
 +
  .cubespinner div {
 +
    position: absolute;
 +
    width: 120px;
 +
    height: 120px;
 +
    background: rgba(255,255,255,0.8);
 +
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
 +
  }
 +
 +
  .cubespinner .face1 {
 +
    -webkit-transform: translateZ(60px);
 +
    -moz-transform: translateZ(60px);
 +
    -ms-transform: translateZ(60px);
 +
    transform: translateZ(60px);
 +
  }
 +
  .cubespinner .face2 {
 +
    -webkit-transform: rotateY(90deg) translateZ(60px);
 +
    -moz-transform: rotateY(90deg) translateZ(60px);
 +
    -ms-transform: rotateY(90deg) translateZ(60px);
 +
    transform: rotateY(90deg) translateZ(60px);
 +
  }
 +
  .cubespinner .face3 {
 +
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
 +
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
 +
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
 +
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
 +
  }
 +
  .cubespinner .face4 {
 +
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
 +
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
 +
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
 +
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
 +
  }
 +
  .cubespinner .face5 {
 +
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
 +
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
 +
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
 +
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
 +
  }
 +
  .cubespinner .face6 {
 +
    -webkit-transform: rotateX(-90deg) translateZ(60px);
 +
    -moz-transform: rotateX(-90deg) translateZ(60px);
 +
    -ms-transform: rotateX(-90deg) translateZ(60px);
 +
    transform: rotateX(-90deg) translateZ(60px);
 +
  }
 +
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 16:36, 13 October 2017