EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
    padding:0;
    margin:0;
    overflow-x:hidden;
    background-color:#199eff;
}

.base div {
    position:absolute;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

svg {
    position:absolute;
}

svg polygon {
    stroke:rgba(255, 255, 255, 0.50);
}

#tri {
    fill:rgba(255, 255, 255, 0.50);
}

#tpz1 {
    fill:rgba(203, 237, 255, 0.50);
    -webkit-animation-delay:0.4s;
       -moz-animation-delay:0.4s;
         -o-animation-delay:0.4s;
        -ms-animation-delay:0.4s;
            animation-delay:0.4s;
}

#tpz2 {
    fill:rgba(162, 222, 255, 0.50);
    -webkit-animation-delay:0.8s;
       -moz-animation-delay:0.8s;
         -o-animation-delay:0.8s;
        -ms-animation-delay:0.8s;
            animation-delay:0.8s;
}

#tpz3 {
    fill:rgba(162, 222, 255, 0.30);
    -webkit-animation-delay:1s;
       -moz-animation-delay:1s;
         -o-animation-delay:1s;
        -ms-animation-delay:1s;
            animation-delay:1s;
}

#wrapper {
    width:100%;
    height:100%;
    position:fixed;
}

.centering {
    left:50%;
    top:50%;
    margin-left:-120px;
    margin-top:-120px;
    width:240px;
    height:240px;
    position:absolute;
}

#outline {
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

.base {
    position:absolute;
    width:inherit;
    height:inherit;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;
    -webkit-transform:translate3d(0.00px,0.00px,0.00px);
       -moz-transform:translate3d(0.00px,0.00px,0.00px);
         -o-transform:translate3d(0.00px,0.00px,0.00px);
        -ms-transform:translate3d(0.00px,0.00px,0.00px);
            transform:translate3d(0.00px,0.00px,0.00px);
}

.obj {
    -webkit-transform:translate3d(104px,121.00px,0.00px);
       -moz-transform:translate3d(104px,121.00px,0.00px);
         -o-transform:translate3d(104px,121.00px,0.00px);
        -ms-transform:translate3d(104px,121.00px,0.00px);
            transform:translate3d(104px,121.00px,0.00px);
}

/*--Basic Setting--*/
.tr1a {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
}

.tr1b {
    -webkit-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
       -moz-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
         -o-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
        -ms-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
            transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
}

.tpz1a {
    -webkit-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
       -moz-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
         -o-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
        -ms-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
            transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
}

.tpz1b {
    -webkit-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
       -moz-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
         -o-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
        -ms-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
            transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
}

.tpz2a {
    -webkit-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
       -moz-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
         -o-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
        -ms-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
            transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
}

.tpz2b {
    -webkit-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
       -moz-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
         -o-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
        -ms-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
            transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
}

.tpz3a {
    -webkit-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
       -moz-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
         -o-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
        -ms-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
            transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
}

.tpz3b {
    -webkit-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
       -moz-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
         -o-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
        -ms-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
            transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
}

.opposite1 {
}

.opposite2 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
}

.opposite3 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
}

.opposite4 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
}

.opposite5 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
}

.opposite6 {
    -webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
       -moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
         -o-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
        -ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
            transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
}

.phase-1 > div,
.phase-2 > div,
.phase-3 > div,
.phase-4 > div {
    width:32px;
}

.phase-1 {
    -webkit-transform:translate3d(0.00px,0.00px,100px);
       -moz-transform:translate3d(0.00px,0.00px,100px);
         -o-transform:translate3d(0.00px,0.00px,100px);
        -ms-transform:translate3d(0.00px,0.00px,100px);
            transform:translate3d(0.00px,0.00px,100px);
}

.phase-2 {
    -webkit-transform:translate3d(0.00px,0.00px,77.50px);
       -moz-transform:translate3d(0.00px,0.00px,77.50px);
         -o-transform:translate3d(0.00px,0.00px,77.50px);
        -ms-transform:translate3d(0.00px,0.00px,77.50px);
            transform:translate3d(0.00px,0.00px,77.50px);
}

.phase-3 {
    -webkit-transform:translate3d(0.00px,0.00px,36px);
       -moz-transform:translate3d(0.00px,0.00px,36px);
         -o-transform:translate3d(0.00px,0.00px,36px);
        -ms-transform:translate3d(0.00px,0.00px,36px);
            transform:translate3d(0.00px,0.00px,36px);
}

.phase-4 {
    -webkit-transform:translate3d(0.00px,0.00px,-18px);
       -moz-transform:translate3d(0.00px,0.00px,-18px);
         -o-transform:translate3d(0.00px,0.00px,-18px);
        -ms-transform:translate3d(0.00px,0.00px,-18px);
            transform:translate3d(0.00px,0.00px,-18px);
}

.hemi {
    -webkit-transform:translate3d(0.00px,0.00px,47px);
       -moz-transform:translate3d(0.00px,0.00px,47px);
         -o-transform:translate3d(0.00px,0.00px,47px);
        -ms-transform:translate3d(0.00px,0.00px,47px);
            transform:translate3d(0.00px,0.00px,47px);
    width:32px;
}

.hemi2 {
    -webkit-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
       -moz-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
         -o-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
        -ms-transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
            transform:translate3d(0.00px,0.00px,-47px) rotate(0.00deg) rotateX(180.00deg);
    width:32px;
}

/*transform*/
#outline {
    -webkit-animation-name:outline;
       -moz-animation-name:outline;
         -o-animation-name:outline;
        -ms-animation-name:outline;
            animation-name:outline;
    -webkit-animation-duration:30s;
       -moz-animation-duration:30s;
         -o-animation-duration:30s;
        -ms-animation-duration:30s;
            animation-duration:30s;
    -webkit-animation-iteration-count:infinite;
       -moz-animation-iteration-count:infinite;
         -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
    -webkit-animation-fill-mode:forwards;
       -moz-animation-fill-mode:forwards;
         -o-animation-fill-mode:forwards;
        -ms-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
            transform-style:preserve-3d;

}

@-webkit-keyframes outline {
    0% {
        -webkit-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -webkit-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -webkit-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -webkit-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -webkit-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@-moz-keyframes outline {
    0% {
        -moz-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -moz-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -moz-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -moz-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -moz-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@-o-keyframes outline {
    0% {
        -o-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -o-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -o-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -o-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -o-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@-ms-keyframes outline {
    0% {
        -ms-transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        -ms-transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        -ms-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        -ms-transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        -ms-transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

@keyframes outline{
    0% {
        transform :perspective(14040px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(0.1, 0.1, 0.1);
    }
    0% {
        transform :perspective(1420px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    }
    26% {
        transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(-51deg) rotateZ(90deg) scale3d(1, 1, 1);
    }
    73% {
        transform :perspective(280px) translate3d(0px, 0px, 150px) rotateX(34deg) rotateZ(255deg) scale3d(1, 1, 1);
    }
    100% {
        transform :perspective(1240px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateZ(-270deg) scale3d(1, 1, 1);
    }
}

HTML

Recommendation

Join Effecthub.com