Iso-Metric Snake

Developer

Size

5,511 Kb

Views

34,408

Iso-Metric Snake Previews
Iso-Metric Snake HTML Codes
Iso-Metric Snake CSS Codes
Iso-Metric Snake JS Codes

How do I make an iso-metric snake?

This experiment was created by re-architecting an existing experiment from Joshua Hibbert. http://codepen.io/joshnh/details/IchEz. Thanks for the base work and inspiration!. What is a iso-metric snake? How do you make a iso-metric snake? This script and codes were developed by Jeff Scott Ward on 28 August 2022, Sunday.

Iso-Metric Snake Previews

Iso-Metric Snake - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Iso-Metric Snake</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-size: 100%;
}
.perspective { height: 9em; right: 0%; top: 10%; margin: 0; padding: 3em; position: absolute; width: 9em; -webkit-transform: rotateX(45deg) rotateZ(45deg); -webkit-transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before { box-shadow: inset 0 0 0 0.25em rgba(0, 0, 0, 0.1); content: ""; float: left; height: 3em; position: absolute; width: 3em;
}
/* Top */
.cube { background-color: #f66; position: relative; -webkit-transform: translateZ(3em); -webkit-transform-style: preserve-3d; -webkit-transition: 0.25s;
}
/* Left */
.cube:after { background-color: #e55; -webkit-transform: rotateX(-90deg) translateY(3em); -webkit-transform-origin: 100% 100%;
}
/* Right */
.cube:before { background-color: #d44; -webkit-transform: rotateY(90deg) translateX(3em); -webkit-transform-origin: 100% 0;
}
/* Alternate Colour */
.cube:nth-child(even) { background-color: #fc6;
}
.cube:nth-child(even):after { background-color: #eb5;
}
.cube:nth-child(even):before { background-color: #da4;
}
/* Animation */
@keyframes wave { 0% { -webkit-transform: translateZ(3em); } 50% { -webkit-transform: translateZ(12.5em); } 100% { -webkit-transform: translateZ(3em); }
}
/*Loop to assign animation delays, and vertical position individually */
.cube:nth-child(1) { -webkit-transform: rotateY(1*4deg); -webkit-animation: wave 1.5s 0s ease-in-out infinite;
}
.cube:nth-child(2) { -webkit-transform: rotateY(2*4deg); -webkit-animation: wave 1.5s 0.05s ease-in-out infinite;
}
.cube:nth-child(3) { -webkit-transform: rotateY(3*4deg); -webkit-animation: wave 1.5s 0.1s ease-in-out infinite;
}
.cube:nth-child(4) { -webkit-transform: rotateY(4*4deg); -webkit-animation: wave 1.5s 0.15s ease-in-out infinite;
}
.cube:nth-child(5) { -webkit-transform: rotateY(5*4deg); -webkit-animation: wave 1.5s 0.2s ease-in-out infinite;
}
.cube:nth-child(6) { -webkit-transform: rotateY(6*4deg); -webkit-animation: wave 1.5s 0.25s ease-in-out infinite;
}
.cube:nth-child(7) { -webkit-transform: rotateY(7*4deg); -webkit-animation: wave 1.5s 0.3s ease-in-out infinite;
}
.cube:nth-child(8) { -webkit-transform: rotateY(8*4deg); -webkit-animation: wave 1.5s 0.35s ease-in-out infinite;
}
.cube:nth-child(9) { -webkit-transform: rotateY(9*4deg); -webkit-animation: wave 1.5s 0.4s ease-in-out infinite;
}
.cube:nth-child(10) { -webkit-transform: rotateY(10*4deg); -webkit-animation: wave 1.5s 0.45s ease-in-out infinite;
}
.cube:nth-child(11) { -webkit-transform: rotateY(11*4deg); -webkit-animation: wave 1.5s 0.5s ease-in-out infinite;
}
.cube:nth-child(12) { -webkit-transform: rotateY(12*4deg); -webkit-animation: wave 1.5s 0.55s ease-in-out infinite;
}
.cube:nth-child(13) { -webkit-transform: rotateY(13*4deg); -webkit-animation: wave 1.5s 0.6s ease-in-out infinite;
}
.cube:nth-child(14) { -webkit-transform: rotateY(14*4deg); -webkit-animation: wave 1.5s 0.65s ease-in-out infinite;
}
.cube:nth-child(15) { -webkit-transform: rotateY(15*4deg); -webkit-animation: wave 1.5s 0.7s ease-in-out infinite;
}
.cube:nth-child(16) { -webkit-transform: rotateY(16*4deg); -webkit-animation: wave 1.5s 0.75s ease-in-out infinite;
}
.cube:nth-child(17) { -webkit-transform: rotateY(17*4deg); -webkit-animation: wave 1.5s 0.8s ease-in-out infinite;
}
.cube:nth-child(18) { -webkit-transform: rotateY(18*4deg); -webkit-animation: wave 1.5s 0.85s ease-in-out infinite;
}
.cube:nth-child(19) { -webkit-transform: rotateY(19*4deg); -webkit-animation: wave 1.5s 0.9s ease-in-out infinite;
}
.cube:nth-child(20) { -webkit-transform: rotateY(20*4deg); -webkit-animation: wave 1.5s 0.95s ease-in-out infinite;
}
.cube:nth-child(21) { -webkit-transform: rotateY(21*4deg); -webkit-animation: wave 1.5s 1s ease-in-out infinite;
}
.cube:nth-child(22) { -webkit-transform: rotateY(22*4deg); -webkit-animation: wave 1.5s 1.05s ease-in-out infinite;
}
.cube:nth-child(23) { -webkit-transform: rotateY(23*4deg); -webkit-animation: wave 1.5s 1.1s ease-in-out infinite;
}
.cube:nth-child(24) { -webkit-transform: rotateY(24*4deg); -webkit-animation: wave 1.5s 1.15s ease-in-out infinite;
}
.cube:nth-child(25) { -webkit-transform: rotateY(25*4deg); -webkit-animation: wave 1.5s 1.2s ease-in-out infinite;
}
.cube:nth-child(26) { -webkit-transform: rotateY(26*4deg); -webkit-animation: wave 1.5s 1.25s ease-in-out infinite;
}
.cube:nth-child(27) { -webkit-transform: rotateY(27*4deg); -webkit-animation: wave 1.5s 1.3s ease-in-out infinite;
}
.cube:nth-child(28) { -webkit-transform: rotateY(28*4deg); -webkit-animation: wave 1.5s 1.35s ease-in-out infinite;
}
.cube:nth-child(29) { -webkit-transform: rotateY(29*4deg); -webkit-animation: wave 1.5s 1.4s ease-in-out infinite;
}
.cube:nth-child(30) { -webkit-transform: rotateY(30*4deg); -webkit-animation: wave 1.5s 1.45s ease-in-out infinite;
}
.cube:nth-child(31) { -webkit-transform: rotateY(31*4deg); -webkit-animation: wave 1.5s 1.5s ease-in-out infinite;
}
.cube:nth-child(32) { -webkit-transform: rotateY(32*4deg); -webkit-animation: wave 1.5s 1.55s ease-in-out infinite;
}
.cube:nth-child(33) { -webkit-transform: rotateY(33*4deg); -webkit-animation: wave 1.5s 1.6s ease-in-out infinite;
}
.cube:nth-child(34) { -webkit-transform: rotateY(34*4deg); -webkit-animation: wave 1.5s 1.65s ease-in-out infinite;
}
.cube:nth-child(35) { -webkit-transform: rotateY(35*4deg); -webkit-animation: wave 1.5s 1.7s ease-in-out infinite;
}
.cube:nth-child(36) { -webkit-transform: rotateY(36*4deg); -webkit-animation: wave 1.5s 1.75s ease-in-out infinite;
}
.cube:nth-child(37) { -webkit-transform: rotateY(37*4deg); -webkit-animation: wave 1.5s 1.8s ease-in-out infinite;
}
.cube:nth-child(38) { -webkit-transform: rotateY(38*4deg); -webkit-animation: wave 1.5s 1.85s ease-in-out infinite;
}
.cube:nth-child(39) { -webkit-transform: rotateY(39*4deg); -webkit-animation: wave 1.5s 1.9s ease-in-out infinite;
}
.cube:nth-child(40) { -webkit-transform: rotateY(40*4deg); -webkit-animation: wave 1.5s 1.95s ease-in-out infinite;
}
.cube:nth-child(41) { -webkit-transform: rotateY(41*4deg); -webkit-animation: wave 1.5s 2s ease-in-out infinite;
}
.cube:nth-child(42) { -webkit-transform: rotateY(42*4deg); -webkit-animation: wave 1.5s 2.05s ease-in-out infinite;
}
.cube:nth-child(43) { -webkit-transform: rotateY(43*4deg); -webkit-animation: wave 1.5s 2.1s ease-in-out infinite;
}
.cube:nth-child(44) { -webkit-transform: rotateY(44*4deg); -webkit-animation: wave 1.5s 2.15s ease-in-out infinite;
}
.cube:nth-child(45) { -webkit-transform: rotateY(45*4deg); -webkit-animation: wave 1.5s 2.2s ease-in-out infinite;
}
.cube:nth-child(46) { -webkit-transform: rotateY(46*4deg); -webkit-animation: wave 1.5s 2.25s ease-in-out infinite;
}
.cube:nth-child(47) { -webkit-transform: rotateY(47*4deg); -webkit-animation: wave 1.5s 2.3s ease-in-out infinite;
}
.cube:nth-child(48) { -webkit-transform: rotateY(48*4deg); -webkit-animation: wave 1.5s 2.35s ease-in-out infinite;
}
.cube:nth-child(49) { -webkit-transform: rotateY(49*4deg); -webkit-animation: wave 1.5s 2.4s ease-in-out infinite;
}
.cube:nth-child(50) { -webkit-transform: rotateY(50*4deg); -webkit-animation: wave 1.5s 2.45s ease-in-out infinite;
}
.cube:nth-child(51) { -webkit-transform: rotateY(51*4deg); -webkit-animation: wave 1.5s 2.5s ease-in-out infinite;
}
.cube:nth-child(52) { -webkit-transform: rotateY(52*4deg); -webkit-animation: wave 1.5s 2.55s ease-in-out infinite;
}
.cube:nth-child(53) { -webkit-transform: rotateY(53*4deg); -webkit-animation: wave 1.5s 2.6s ease-in-out infinite;
}
.cube:nth-child(54) { -webkit-transform: rotateY(54*4deg); -webkit-animation: wave 1.5s 2.65s ease-in-out infinite;
}
.cube:nth-child(55) { -webkit-transform: rotateY(55*4deg); -webkit-animation: wave 1.5s 2.7s ease-in-out infinite;
}
.cube:nth-child(56) { -webkit-transform: rotateY(56*4deg); -webkit-animation: wave 1.5s 2.75s ease-in-out infinite;
}
.cube:nth-child(57) { -webkit-transform: rotateY(57*4deg); -webkit-animation: wave 1.5s 2.8s ease-in-out infinite;
}
.cube:nth-child(58) { -webkit-transform: rotateY(58*4deg); -webkit-animation: wave 1.5s 2.85s ease-in-out infinite;
}
.cube:nth-child(59) { -webkit-transform: rotateY(59*4deg); -webkit-animation: wave 1.5s 2.9s ease-in-out infinite;
}
.cube:nth-child(60) { -webkit-transform: rotateY(60*4deg); -webkit-animation: wave 1.5s 2.95s ease-in-out infinite;
}
.cube:nth-child(61) { -webkit-transform: rotateY(61*4deg); -webkit-animation: wave 1.5s 3s ease-in-out infinite;
}
.cube:nth-child(62) { -webkit-transform: rotateY(62*4deg); -webkit-animation: wave 1.5s 3.05s ease-in-out infinite;
}
.cube:nth-child(63) { -webkit-transform: rotateY(63*4deg); -webkit-animation: wave 1.5s 3.1s ease-in-out infinite;
}
.cube:nth-child(64) { -webkit-transform: rotateY(64*4deg); -webkit-animation: wave 1.5s 3.15s ease-in-out infinite;
}
.cube:nth-child(65) { -webkit-transform: rotateY(65*4deg); -webkit-animation: wave 1.5s 3.2s ease-in-out infinite;
}
.cube:nth-child(66) { -webkit-transform: rotateY(66*4deg); -webkit-animation: wave 1.5s 3.25s ease-in-out infinite;
}
.cube:nth-child(67) { -webkit-transform: rotateY(67*4deg); -webkit-animation: wave 1.5s 3.3s ease-in-out infinite;
}
.cube:nth-child(68) { -webkit-transform: rotateY(68*4deg); -webkit-animation: wave 1.5s 3.35s ease-in-out infinite;
}
.cube:nth-child(69) { -webkit-transform: rotateY(69*4deg); -webkit-animation: wave 1.5s 3.4s ease-in-out infinite;
}
.cube:nth-child(70) { -webkit-transform: rotateY(70*4deg); -webkit-animation: wave 1.5s 3.45s ease-in-out infinite;
}
.cube:nth-child(71) { -webkit-transform: rotateY(71*4deg); -webkit-animation: wave 1.5s 3.5s ease-in-out infinite;
}
.cube:nth-child(72) { -webkit-transform: rotateY(72*4deg); -webkit-animation: wave 1.5s 3.55s ease-in-out infinite;
}
.cube:nth-child(73) { -webkit-transform: rotateY(73*4deg); -webkit-animation: wave 1.5s 3.6s ease-in-out infinite;
}
.cube:nth-child(74) { -webkit-transform: rotateY(74*4deg); -webkit-animation: wave 1.5s 3.65s ease-in-out infinite;
}
.cube:nth-child(75) { -webkit-transform: rotateY(75*4deg); -webkit-animation: wave 1.5s 3.7s ease-in-out infinite;
}
.cube:nth-child(76) { -webkit-transform: rotateY(76*4deg); -webkit-animation: wave 1.5s 3.75s ease-in-out infinite;
}
.cube:nth-child(77) { -webkit-transform: rotateY(77*4deg); -webkit-animation: wave 1.5s 3.8s ease-in-out infinite;
}
.cube:nth-child(78) { -webkit-transform: rotateY(78*4deg); -webkit-animation: wave 1.5s 3.85s ease-in-out infinite;
}
.cube:nth-child(79) { -webkit-transform: rotateY(79*4deg); -webkit-animation: wave 1.5s 3.9s ease-in-out infinite;
}
.cube:nth-child(80) { -webkit-transform: rotateY(80*4deg); -webkit-animation: wave 1.5s 3.95s ease-in-out infinite;
}
.cube:nth-child(81) { -webkit-transform: rotateY(81*4deg); -webkit-animation: wave 1.5s 4s ease-in-out infinite;
}
.cube:nth-child(82) { -webkit-transform: rotateY(82*4deg); -webkit-animation: wave 1.5s 4.05s ease-in-out infinite;
}
.cube:nth-child(83) { -webkit-transform: rotateY(83*4deg); -webkit-animation: wave 1.5s 4.1s ease-in-out infinite;
}
.cube:nth-child(84) { -webkit-transform: rotateY(84*4deg); -webkit-animation: wave 1.5s 4.15s ease-in-out infinite;
}
.cube:nth-child(85) { -webkit-transform: rotateY(85*4deg); -webkit-animation: wave 1.5s 4.2s ease-in-out infinite;
}
.cube:nth-child(86) { -webkit-transform: rotateY(86*4deg); -webkit-animation: wave 1.5s 4.25s ease-in-out infinite;
}
.cube:nth-child(87) { -webkit-transform: rotateY(87*4deg); -webkit-animation: wave 1.5s 4.3s ease-in-out infinite;
}
.cube:nth-child(88) { -webkit-transform: rotateY(88*4deg); -webkit-animation: wave 1.5s 4.35s ease-in-out infinite;
}
.cube:nth-child(89) { -webkit-transform: rotateY(89*4deg); -webkit-animation: wave 1.5s 4.4s ease-in-out infinite;
}
.cube:nth-child(90) { -webkit-transform: rotateY(90*4deg); -webkit-animation: wave 1.5s 4.45s ease-in-out infinite;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="perspective"> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Iso-Metric Snake - Script Codes CSS Codes

body { font-size: 100%;
}
.perspective { height: 9em; right: 0%; top: 10%; margin: 0; padding: 3em; position: absolute; width: 9em; -webkit-transform: rotateX(45deg) rotateZ(45deg); -webkit-transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before { box-shadow: inset 0 0 0 0.25em rgba(0, 0, 0, 0.1); content: ""; float: left; height: 3em; position: absolute; width: 3em;
}
/* Top */
.cube { background-color: #f66; position: relative; -webkit-transform: translateZ(3em); -webkit-transform-style: preserve-3d; -webkit-transition: 0.25s;
}
/* Left */
.cube:after { background-color: #e55; -webkit-transform: rotateX(-90deg) translateY(3em); -webkit-transform-origin: 100% 100%;
}
/* Right */
.cube:before { background-color: #d44; -webkit-transform: rotateY(90deg) translateX(3em); -webkit-transform-origin: 100% 0;
}
/* Alternate Colour */
.cube:nth-child(even) { background-color: #fc6;
}
.cube:nth-child(even):after { background-color: #eb5;
}
.cube:nth-child(even):before { background-color: #da4;
}
/* Animation */
@keyframes wave { 0% { -webkit-transform: translateZ(3em); } 50% { -webkit-transform: translateZ(12.5em); } 100% { -webkit-transform: translateZ(3em); }
}
/*Loop to assign animation delays, and vertical position individually */
.cube:nth-child(1) { -webkit-transform: rotateY(1*4deg); -webkit-animation: wave 1.5s 0s ease-in-out infinite;
}
.cube:nth-child(2) { -webkit-transform: rotateY(2*4deg); -webkit-animation: wave 1.5s 0.05s ease-in-out infinite;
}
.cube:nth-child(3) { -webkit-transform: rotateY(3*4deg); -webkit-animation: wave 1.5s 0.1s ease-in-out infinite;
}
.cube:nth-child(4) { -webkit-transform: rotateY(4*4deg); -webkit-animation: wave 1.5s 0.15s ease-in-out infinite;
}
.cube:nth-child(5) { -webkit-transform: rotateY(5*4deg); -webkit-animation: wave 1.5s 0.2s ease-in-out infinite;
}
.cube:nth-child(6) { -webkit-transform: rotateY(6*4deg); -webkit-animation: wave 1.5s 0.25s ease-in-out infinite;
}
.cube:nth-child(7) { -webkit-transform: rotateY(7*4deg); -webkit-animation: wave 1.5s 0.3s ease-in-out infinite;
}
.cube:nth-child(8) { -webkit-transform: rotateY(8*4deg); -webkit-animation: wave 1.5s 0.35s ease-in-out infinite;
}
.cube:nth-child(9) { -webkit-transform: rotateY(9*4deg); -webkit-animation: wave 1.5s 0.4s ease-in-out infinite;
}
.cube:nth-child(10) { -webkit-transform: rotateY(10*4deg); -webkit-animation: wave 1.5s 0.45s ease-in-out infinite;
}
.cube:nth-child(11) { -webkit-transform: rotateY(11*4deg); -webkit-animation: wave 1.5s 0.5s ease-in-out infinite;
}
.cube:nth-child(12) { -webkit-transform: rotateY(12*4deg); -webkit-animation: wave 1.5s 0.55s ease-in-out infinite;
}
.cube:nth-child(13) { -webkit-transform: rotateY(13*4deg); -webkit-animation: wave 1.5s 0.6s ease-in-out infinite;
}
.cube:nth-child(14) { -webkit-transform: rotateY(14*4deg); -webkit-animation: wave 1.5s 0.65s ease-in-out infinite;
}
.cube:nth-child(15) { -webkit-transform: rotateY(15*4deg); -webkit-animation: wave 1.5s 0.7s ease-in-out infinite;
}
.cube:nth-child(16) { -webkit-transform: rotateY(16*4deg); -webkit-animation: wave 1.5s 0.75s ease-in-out infinite;
}
.cube:nth-child(17) { -webkit-transform: rotateY(17*4deg); -webkit-animation: wave 1.5s 0.8s ease-in-out infinite;
}
.cube:nth-child(18) { -webkit-transform: rotateY(18*4deg); -webkit-animation: wave 1.5s 0.85s ease-in-out infinite;
}
.cube:nth-child(19) { -webkit-transform: rotateY(19*4deg); -webkit-animation: wave 1.5s 0.9s ease-in-out infinite;
}
.cube:nth-child(20) { -webkit-transform: rotateY(20*4deg); -webkit-animation: wave 1.5s 0.95s ease-in-out infinite;
}
.cube:nth-child(21) { -webkit-transform: rotateY(21*4deg); -webkit-animation: wave 1.5s 1s ease-in-out infinite;
}
.cube:nth-child(22) { -webkit-transform: rotateY(22*4deg); -webkit-animation: wave 1.5s 1.05s ease-in-out infinite;
}
.cube:nth-child(23) { -webkit-transform: rotateY(23*4deg); -webkit-animation: wave 1.5s 1.1s ease-in-out infinite;
}
.cube:nth-child(24) { -webkit-transform: rotateY(24*4deg); -webkit-animation: wave 1.5s 1.15s ease-in-out infinite;
}
.cube:nth-child(25) { -webkit-transform: rotateY(25*4deg); -webkit-animation: wave 1.5s 1.2s ease-in-out infinite;
}
.cube:nth-child(26) { -webkit-transform: rotateY(26*4deg); -webkit-animation: wave 1.5s 1.25s ease-in-out infinite;
}
.cube:nth-child(27) { -webkit-transform: rotateY(27*4deg); -webkit-animation: wave 1.5s 1.3s ease-in-out infinite;
}
.cube:nth-child(28) { -webkit-transform: rotateY(28*4deg); -webkit-animation: wave 1.5s 1.35s ease-in-out infinite;
}
.cube:nth-child(29) { -webkit-transform: rotateY(29*4deg); -webkit-animation: wave 1.5s 1.4s ease-in-out infinite;
}
.cube:nth-child(30) { -webkit-transform: rotateY(30*4deg); -webkit-animation: wave 1.5s 1.45s ease-in-out infinite;
}
.cube:nth-child(31) { -webkit-transform: rotateY(31*4deg); -webkit-animation: wave 1.5s 1.5s ease-in-out infinite;
}
.cube:nth-child(32) { -webkit-transform: rotateY(32*4deg); -webkit-animation: wave 1.5s 1.55s ease-in-out infinite;
}
.cube:nth-child(33) { -webkit-transform: rotateY(33*4deg); -webkit-animation: wave 1.5s 1.6s ease-in-out infinite;
}
.cube:nth-child(34) { -webkit-transform: rotateY(34*4deg); -webkit-animation: wave 1.5s 1.65s ease-in-out infinite;
}
.cube:nth-child(35) { -webkit-transform: rotateY(35*4deg); -webkit-animation: wave 1.5s 1.7s ease-in-out infinite;
}
.cube:nth-child(36) { -webkit-transform: rotateY(36*4deg); -webkit-animation: wave 1.5s 1.75s ease-in-out infinite;
}
.cube:nth-child(37) { -webkit-transform: rotateY(37*4deg); -webkit-animation: wave 1.5s 1.8s ease-in-out infinite;
}
.cube:nth-child(38) { -webkit-transform: rotateY(38*4deg); -webkit-animation: wave 1.5s 1.85s ease-in-out infinite;
}
.cube:nth-child(39) { -webkit-transform: rotateY(39*4deg); -webkit-animation: wave 1.5s 1.9s ease-in-out infinite;
}
.cube:nth-child(40) { -webkit-transform: rotateY(40*4deg); -webkit-animation: wave 1.5s 1.95s ease-in-out infinite;
}
.cube:nth-child(41) { -webkit-transform: rotateY(41*4deg); -webkit-animation: wave 1.5s 2s ease-in-out infinite;
}
.cube:nth-child(42) { -webkit-transform: rotateY(42*4deg); -webkit-animation: wave 1.5s 2.05s ease-in-out infinite;
}
.cube:nth-child(43) { -webkit-transform: rotateY(43*4deg); -webkit-animation: wave 1.5s 2.1s ease-in-out infinite;
}
.cube:nth-child(44) { -webkit-transform: rotateY(44*4deg); -webkit-animation: wave 1.5s 2.15s ease-in-out infinite;
}
.cube:nth-child(45) { -webkit-transform: rotateY(45*4deg); -webkit-animation: wave 1.5s 2.2s ease-in-out infinite;
}
.cube:nth-child(46) { -webkit-transform: rotateY(46*4deg); -webkit-animation: wave 1.5s 2.25s ease-in-out infinite;
}
.cube:nth-child(47) { -webkit-transform: rotateY(47*4deg); -webkit-animation: wave 1.5s 2.3s ease-in-out infinite;
}
.cube:nth-child(48) { -webkit-transform: rotateY(48*4deg); -webkit-animation: wave 1.5s 2.35s ease-in-out infinite;
}
.cube:nth-child(49) { -webkit-transform: rotateY(49*4deg); -webkit-animation: wave 1.5s 2.4s ease-in-out infinite;
}
.cube:nth-child(50) { -webkit-transform: rotateY(50*4deg); -webkit-animation: wave 1.5s 2.45s ease-in-out infinite;
}
.cube:nth-child(51) { -webkit-transform: rotateY(51*4deg); -webkit-animation: wave 1.5s 2.5s ease-in-out infinite;
}
.cube:nth-child(52) { -webkit-transform: rotateY(52*4deg); -webkit-animation: wave 1.5s 2.55s ease-in-out infinite;
}
.cube:nth-child(53) { -webkit-transform: rotateY(53*4deg); -webkit-animation: wave 1.5s 2.6s ease-in-out infinite;
}
.cube:nth-child(54) { -webkit-transform: rotateY(54*4deg); -webkit-animation: wave 1.5s 2.65s ease-in-out infinite;
}
.cube:nth-child(55) { -webkit-transform: rotateY(55*4deg); -webkit-animation: wave 1.5s 2.7s ease-in-out infinite;
}
.cube:nth-child(56) { -webkit-transform: rotateY(56*4deg); -webkit-animation: wave 1.5s 2.75s ease-in-out infinite;
}
.cube:nth-child(57) { -webkit-transform: rotateY(57*4deg); -webkit-animation: wave 1.5s 2.8s ease-in-out infinite;
}
.cube:nth-child(58) { -webkit-transform: rotateY(58*4deg); -webkit-animation: wave 1.5s 2.85s ease-in-out infinite;
}
.cube:nth-child(59) { -webkit-transform: rotateY(59*4deg); -webkit-animation: wave 1.5s 2.9s ease-in-out infinite;
}
.cube:nth-child(60) { -webkit-transform: rotateY(60*4deg); -webkit-animation: wave 1.5s 2.95s ease-in-out infinite;
}
.cube:nth-child(61) { -webkit-transform: rotateY(61*4deg); -webkit-animation: wave 1.5s 3s ease-in-out infinite;
}
.cube:nth-child(62) { -webkit-transform: rotateY(62*4deg); -webkit-animation: wave 1.5s 3.05s ease-in-out infinite;
}
.cube:nth-child(63) { -webkit-transform: rotateY(63*4deg); -webkit-animation: wave 1.5s 3.1s ease-in-out infinite;
}
.cube:nth-child(64) { -webkit-transform: rotateY(64*4deg); -webkit-animation: wave 1.5s 3.15s ease-in-out infinite;
}
.cube:nth-child(65) { -webkit-transform: rotateY(65*4deg); -webkit-animation: wave 1.5s 3.2s ease-in-out infinite;
}
.cube:nth-child(66) { -webkit-transform: rotateY(66*4deg); -webkit-animation: wave 1.5s 3.25s ease-in-out infinite;
}
.cube:nth-child(67) { -webkit-transform: rotateY(67*4deg); -webkit-animation: wave 1.5s 3.3s ease-in-out infinite;
}
.cube:nth-child(68) { -webkit-transform: rotateY(68*4deg); -webkit-animation: wave 1.5s 3.35s ease-in-out infinite;
}
.cube:nth-child(69) { -webkit-transform: rotateY(69*4deg); -webkit-animation: wave 1.5s 3.4s ease-in-out infinite;
}
.cube:nth-child(70) { -webkit-transform: rotateY(70*4deg); -webkit-animation: wave 1.5s 3.45s ease-in-out infinite;
}
.cube:nth-child(71) { -webkit-transform: rotateY(71*4deg); -webkit-animation: wave 1.5s 3.5s ease-in-out infinite;
}
.cube:nth-child(72) { -webkit-transform: rotateY(72*4deg); -webkit-animation: wave 1.5s 3.55s ease-in-out infinite;
}
.cube:nth-child(73) { -webkit-transform: rotateY(73*4deg); -webkit-animation: wave 1.5s 3.6s ease-in-out infinite;
}
.cube:nth-child(74) { -webkit-transform: rotateY(74*4deg); -webkit-animation: wave 1.5s 3.65s ease-in-out infinite;
}
.cube:nth-child(75) { -webkit-transform: rotateY(75*4deg); -webkit-animation: wave 1.5s 3.7s ease-in-out infinite;
}
.cube:nth-child(76) { -webkit-transform: rotateY(76*4deg); -webkit-animation: wave 1.5s 3.75s ease-in-out infinite;
}
.cube:nth-child(77) { -webkit-transform: rotateY(77*4deg); -webkit-animation: wave 1.5s 3.8s ease-in-out infinite;
}
.cube:nth-child(78) { -webkit-transform: rotateY(78*4deg); -webkit-animation: wave 1.5s 3.85s ease-in-out infinite;
}
.cube:nth-child(79) { -webkit-transform: rotateY(79*4deg); -webkit-animation: wave 1.5s 3.9s ease-in-out infinite;
}
.cube:nth-child(80) { -webkit-transform: rotateY(80*4deg); -webkit-animation: wave 1.5s 3.95s ease-in-out infinite;
}
.cube:nth-child(81) { -webkit-transform: rotateY(81*4deg); -webkit-animation: wave 1.5s 4s ease-in-out infinite;
}
.cube:nth-child(82) { -webkit-transform: rotateY(82*4deg); -webkit-animation: wave 1.5s 4.05s ease-in-out infinite;
}
.cube:nth-child(83) { -webkit-transform: rotateY(83*4deg); -webkit-animation: wave 1.5s 4.1s ease-in-out infinite;
}
.cube:nth-child(84) { -webkit-transform: rotateY(84*4deg); -webkit-animation: wave 1.5s 4.15s ease-in-out infinite;
}
.cube:nth-child(85) { -webkit-transform: rotateY(85*4deg); -webkit-animation: wave 1.5s 4.2s ease-in-out infinite;
}
.cube:nth-child(86) { -webkit-transform: rotateY(86*4deg); -webkit-animation: wave 1.5s 4.25s ease-in-out infinite;
}
.cube:nth-child(87) { -webkit-transform: rotateY(87*4deg); -webkit-animation: wave 1.5s 4.3s ease-in-out infinite;
}
.cube:nth-child(88) { -webkit-transform: rotateY(88*4deg); -webkit-animation: wave 1.5s 4.35s ease-in-out infinite;
}
.cube:nth-child(89) { -webkit-transform: rotateY(89*4deg); -webkit-animation: wave 1.5s 4.4s ease-in-out infinite;
}
.cube:nth-child(90) { -webkit-transform: rotateY(90*4deg); -webkit-animation: wave 1.5s 4.45s ease-in-out infinite;
}

Iso-Metric Snake - Script Codes JS Codes

(function() {
}).call(this);

Home Page	Home
Developer	Jeff Scott Ward
Username	jeffscottward
Uploaded	August 28, 2022
Rating	4
Size	5,511 Kb
Views	34,408

Do you need developer help for Iso-Metric Snake?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Scott Ward (jeffscottward) Script Codes

Name	Size
Lab 49 Logo Animated	3,749 Kb
Pure CSS Responsive Slider	5,404 Kb
Impress JS Algorhytmic Generator	7,906 Kb
3D Hexagon Text Roller	2,289 Kb
XBOX 360 UI	9,781 Kb
Object Oriented SASS Framework	8,564 Kb
Trader Phone APP UI	6,799 Kb
A Pen by Jeff Scott Ward	696,840 Kb
Panning Wall Tiles	2,822 Kb
Sprite Animation	2,669 Kb

Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Out of the blue	Giaco	2,537 Kb
A Pen by Gregory Potdevin	GregoryPotdevin	1,713 Kb
Disable JavaScript execution from console	Ludviglindblom	2,534 Kb
Box Shadow Effects	Retrofuturistic	2,143 Kb
Lunar eclipse	Ademilter	2,056 Kb
Local Weather App - FreeCodeCamp	TrevorWelch	4,134 Kb
Basic 3D Fullscreen Transition	Apetrov	3,270 Kb
TweenMax transformOrigin Bubble	Nicolund	2,209 Kb
Flex Chart	James_zedd	4,111 Kb
RAQuote	Naderk007	4,412 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!