<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet prefetch" href="https://preview.codepad.co/css/normalize.min.css">
<style>
body, html {
margin: 0;
padding: 0;
}
/* PEN STARTS */
.circle {
width: 40px;
margin: 0 auto;
margin-top: 200px;
animation: rotateround 10s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
}
.face:nth-child(0) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-0 30s linear infinite;
}
</style>
</head>
<body itemscope="" itemtype="https://preview.codepad.co/redirect?url=http://schema.org/MediaObject">
<meta charset="utf-8">
<meta name="generator" content="Software RVG HTML Editor (www.software-rvg.com)">
<meta name="dcterms.created" content="ju., 21 ene. 2016 21:29:24 GMT">
<meta name="description" content="Software RVG advanced designs_Magic_ball">
<meta name="keywords" content="Software RVG,Advanced designs,magic ball rotating" css,svg,javascript="">
<title>SOFTWARE RVG Advanced Designs</title>
<style type="text/css">
<!--
body {
color:#E91414;
background-color:#111111;
background-image:url('Background Image');
background-repeat:no-repeat; width:1000px;
margin-left:auto;
margin-right:auto;
font-family: "Arial", sans-serif;
color:blue;
text-align:center;
font-size:30px;
}
} .header {
width:500px;
margin-left:auto;
margin-right:auto;
font-family: "Arial", sans-serif;
color:blue;
text-align:center;
font-size:30px;
}
.header h3 {
color:blue;
opacity:0.9;
}
.header h2{color:#40FF00}
header h5 {color:#00FFFF}
.header small {
color:red;
opacity:0.9;
font-size:20px;
}
/* PEN STARTS */
.circle {
width:40px;
margin:0 auto;
margin-top:200px;
animation: rotateround 10s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
}
$panels: 10;
$rows: 20;
$h: 0;
$hStep: 360/($panels*$rows);
@for $r from 0 to $rows {
@for $i from 0 to $panels {
$x: $r * 360deg / $rows;
$y: $i * 180deg / $panels;
$count: $r*$panels + $i;
.face:nth-child(#{$count}) {
width:40px;
height:40px;
border: 1px solid black;
background:hsl($h, 50%, 70%);
opacity:0.9;
border-radius:50%;
position: absolute;
transform: rotateY($y) rotateX($x) translateZ(200px);
margin-top:0px;
animation:big-#{$count} 30s linear infinite;
}
@keyframes big-#{$count} {
0% {
transform: rotateY($y + 0deg) rotateX($x + 0deg) translateZ(200px);
}
50% {
transform: rotateY($y + 0deg) rotateX($x + 0deg) translateZ(200px);
}
100% {
transform: rotateY($y + 0deg) rotateX($x + 0deg) translateZ(200px);
}
}
$h: $h + $hStep;
}
}
@keyframes rotateround {
0% {
transform: rotateX(0deg) rotateY(20deg);
}
100% {
transform: rotateX(360deg) rotateY(380deg);
}
}
<head><script src="//assets.codepen.io/assets/editor/live/console_runner-ac6f22d6f99e61f8e835261f461f1027.js"></script>
<meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="https://preview.codepad.co/redirect?url=http://codepen.io/samirc/pen/yePNvJ">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" type="text/css">
<style class="cp-pen-styles">.header {
width: 500px;
margin-left: auto;
margin-right: auto;
font-family: 'Montserrat', sans-serif;
color: blue;
text-align: center;
font-size: 30px;
}
.header h3 {
opacity: 0.9;
}
.header small {
opacity: 0.9;
font-size: 20px;
}
.header h4 {color:#00FFFF;
opacity: 0.9;
font-size: 20px;
}
.container {
width: 600px;
padding: 30px;
height: 430px;
box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.5);
margin-left: auto;
margin-right: auto;
}
.footer {
width: 900px;
height: 100px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.footer > h4 {
font-family: 'Montserrat', sans-serif;
color: red;
text-align: center;
font-size: 20px;
opacity: 0.9;
margin-left: auto;
margin-right: auto;
}
.img > a {
margin-top: -20px;
}
.footer .img {
width: 200px;
margin-left: auto;
margin-right: auto;
}
.img > a > img {
width: 50px;
display: inline;
}
.img > h4 {
font-family: 'Montserrat', sans-serif;
color: blue;
text-align: center;
font-size: 15px;
opacity: 0.9;
margin-left: auto;
display: inline;
margin-right: auto;
margin-top: -10px;
}
/* PEN STARTS */
.circle {
width: 40px;
margin: 0 auto;
margin-top: 200px;
animation: rotateround 10s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
}
.face:nth-child(0) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-0 30s linear infinite;
}
@keyframes big-0 {
0% {
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(1) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98f8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-1 30s linear infinite;
}
@keyframes big-1 {
0% {
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(2) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9918c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-2 30s linear infinite;
}
@keyframes big-2 {
0% {
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(3) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9938c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-3 30s linear infinite;
}
@keyframes big-3 {
0% {
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(4) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9958c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-4 30s linear infinite;
}
@keyframes big-4 {
0% {
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(5) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9988c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-5 30s linear infinite;
}
@keyframes big-5 {
0% {
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(6) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d99a8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-6 30s linear infinite;
}
@keyframes big-6 {
0% {
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(7) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d99c8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-7 30s linear infinite;
}
@keyframes big-7 {
0% {
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(8) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d99f8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-8 30s linear infinite;
}
@keyframes big-8 {
0% {
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(9) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-9 30s linear infinite;
}
@keyframes big-9 {
0% {
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(10) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-10 30s linear infinite;
}
@keyframes big-10 {
0% {
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(11) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a58c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-11 30s linear infinite;
}
@keyframes big-11 {
0% {
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(12) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-12 30s linear infinite;
}
@keyframes big-12 {
0% {
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(13) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9aa8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-13 30s linear infinite;
}
@keyframes big-13 {
0% {
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(14) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9ac8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-14 30s linear infinite;
}
@keyframes big-14 {
0% {
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(15) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9af8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-15 30s linear infinite;
}
@keyframes big-15 {
0% {
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(16) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-16 30s linear infinite;
}
@keyframes big-16 {
0% {
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(17) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-17 30s linear infinite;
}
@keyframes big-17 {
0% {
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(18) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b68c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-18 30s linear infinite;
}
@keyframes big-18 {
0% {
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(19) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-19 30s linear infinite;
}
@keyframes big-19 {
0% {
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(20) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9ba8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-20 30s linear infinite;
}
@keyframes big-20 {
0% {
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(21) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9bc8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-21 30s linear infinite;
}
@keyframes big-21 {
0% {
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(22) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9bf8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-22 30s linear infinite;
}
@keyframes big-22 {
0% {
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(23) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-23 30s linear infinite;
}
@keyframes big-23 {
0% {
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(24) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-24 30s linear infinite;
}
@keyframes big-24 {
0% {
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(25) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c68c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-25 30s linear infinite;
}
@keyframes big-25 {
0% {
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(26) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-26 30s linear infinite;
}
@keyframes big-26 {
0% {
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(27) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9ca8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-27 30s linear infinite;
}
@keyframes big-27 {
0% {
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(28) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9cd8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-28 30s linear infinite;
}
@keyframes big-28 {
0% {
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(29) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9cf8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-29 30s linear infinite;
}
@keyframes big-29 {
0% {
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(30) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-30 30s linear infinite;
}
@keyframes big-30 {
0% {
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(31) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-31 30s linear infinite;
}
@keyframes big-31 {
0% {
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(32) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d68c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-32 30s linear infinite;
}
@keyframes big-32 {
0% {
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(33) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-33 30s linear infinite;
}
@keyframes big-33 {
0% {
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(34) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-34 30s linear infinite;
}
@keyframes big-34 {
0% {
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(35) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-35 30s linear infinite;
}
@keyframes big-35 {
0% {
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(36) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d3d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-36 30s linear infinite;
}
@keyframes big-36 {
0% {
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(37) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-37 30s linear infinite;
}
@keyframes big-37 {
0% {
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(38) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ced98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-38 30s linear infinite;
}
@keyframes big-38 {
0% {
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(39) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ccd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-39 30s linear infinite;
}
@keyframes big-39 {
0% {
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(40) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c9d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-40 30s linear infinite;
}
@keyframes big-40 {
0% {
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(41) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-41 30s linear infinite;
}
@keyframes big-41 {
0% {
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(42) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-42 30s linear infinite;
}
@keyframes big-42 {
0% {
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(43) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c3d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-43 30s linear infinite;
}
@keyframes big-43 {
0% {
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(44) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-44 30s linear infinite;
}
@keyframes big-44 {
0% {
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(45) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #bed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-45 30s linear infinite;
}
@keyframes big-45 {
0% {
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(46) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #bcd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-46 30s linear infinite;
}
@keyframes big-46 {
0% {
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(47) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b9d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-47 30s linear infinite;
}
@keyframes big-47 {
0% {
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(48) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-48 30s linear infinite;
}
@keyframes big-48 {
0% {
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(49) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-49 30s linear infinite;
}
@keyframes big-49 {
0% {
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(50) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b3d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-50 30s linear infinite;
}
@keyframes big-50 {
0% {
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(51) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-51 30s linear infinite;
}
@keyframes big-51 {
0% {
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(52) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #aed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-52 30s linear infinite;
}
@keyframes big-52 {
0% {
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(53) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #acd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-53 30s linear infinite;
}
@keyframes big-53 {
0% {
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(54) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a9d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-54 30s linear infinite;
}
@keyframes big-54 {
0% {
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(55) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-55 30s linear infinite;
}
@keyframes big-55 {
0% {
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(56) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-56 30s linear infinite;
}
@keyframes big-56 {
0% {
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(57) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a2d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-57 30s linear infinite;
}
@keyframes big-57 {
0% {
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(58) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-58 30s linear infinite;
}
@keyframes big-58 {
0% {
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(59) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #9ed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-59 30s linear infinite;
}
@keyframes big-59 {
0% {
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(60) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #9cd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-60 30s linear infinite;
}
@keyframes big-60 {
0% {
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(61) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #99d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-61 30s linear infinite;
}
@keyframes big-61 {
0% {
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(62) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #97d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-62 30s linear infinite;
}
@keyframes big-62 {
0% {
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(63) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #95d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-63 30s linear infinite;
}
@keyframes big-63 {
0% {
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(64) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #92d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-64 30s linear infinite;
}
@keyframes big-64 {
0% {
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(65) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #90d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-65 30s linear infinite;
}
@keyframes big-65 {
0% {
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(66) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-66 30s linear infinite;
}
@keyframes big-66 {
0% {
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(67) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd98d;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-67 30s linear infinite;
}
@keyframes big-67 {
0% {
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(68) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd98f;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-68 30s linear infinite;
}
@keyframes big-68 {
0% {
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(69) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd992;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-69 30s linear infinite;
}
@keyframes big-69 {
0% {
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(70) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd994;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-70 30s linear infinite;
}
@keyframes big-70 {
0% {
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(71) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd996;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-71 30s linear infinite;
}
@keyframes big-71 {
0% {
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(72) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd998;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-72 30s linear infinite;
}
@keyframes big-72 {
0% {
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(73) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd99b;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-73 30s linear infinite;
}
@keyframes big-73 {
0% {
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(74) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd99d;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-74 30s linear infinite;
}
@keyframes big-74 {
0% {
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(75) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd99f;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-75 30s linear infinite;
}
@keyframes big-75 {
0% {
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(76) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-76 30s linear infinite;
}
@keyframes big-76 {
0% {
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(77) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-77 30s linear infinite;
}
@keyframes big-77 {
0% {
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(78) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-78 30s linear infinite;
}
@keyframes big-78 {
0% {
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(79) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-79 30s linear infinite;
}
@keyframes big-79 {
0% {
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(80) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9ab;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-80 30s linear infinite;
}
@keyframes big-80 {
0% {
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(81) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9ad;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-81 30s linear infinite;
}
@keyframes big-81 {
0% {
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(82) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9af;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-82 30s linear infinite;
}
@keyframes big-82 {
0% {
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(83) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-83 30s linear infinite;
}
@keyframes big-83 {
0% {
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(84) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-84 30s linear infinite;
}
@keyframes big-84 {
0% {
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(85) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-85 30s linear infinite;
}
@keyframes big-85 {
0% {
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(86) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-86 30s linear infinite;
}
@keyframes big-86 {
0% {
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(87) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9bb;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-87 30s linear infinite;
}
@keyframes big-87 {
0% {
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(88) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9bd;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-88 30s linear infinite;
}
@keyframes big-88 {
0% {
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(89) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c0;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-89 30s linear infinite;
}
@keyframes big-89 {
0% {
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(90) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-90 30s linear infinite;
}
@keyframes big-90 {
0% {
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(91) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-91 30s linear infinite;
}
@keyframes big-91 {
0% {
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(92) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-92 30s linear infinite;
}
@keyframes big-92 {
0% {
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(93) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-93 30s linear infinite;
}
@keyframes big-93 {
0% {
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(94) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9cb;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-94 30s linear infinite;
}
@keyframes big-94 {
0% {
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(95) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9cd;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-95 30s linear infinite;
}
@keyframes big-95 {
0% {
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(96) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d0;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-96 30s linear infinite;
}
@keyframes big-96 {
0% {
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(97) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-97 30s linear infinite;
}
@keyframes big-97 {
0% {
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(98) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-98 30s linear infinite;
}
@keyframes big-98 {
0% {
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(99) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-99 30s linear infinite;
}
@keyframes big-99 {
0% {
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(100) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-100 30s linear infinite;
}
@keyframes big-100 {
0% {
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(101) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd6d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-101 30s linear infinite;
}
@keyframes big-101 {
0% {
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(102) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd4d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-102 30s linear infinite;
}
@keyframes big-102 {
0% {
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(103) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd2d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-103 30s linear infinite;
}
@keyframes big-103 {
0% {
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(104) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd0d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-104 30s linear infinite;
}
@keyframes big-104 {
0% {
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(105) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ccdd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-105 30s linear infinite;
}
@keyframes big-105 {
0% {
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(106) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ccbd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-106 3
CSS3 development with javascript added by Software RVG
Setting up Keyframes
A @SoftwareRVG-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes.
While this may sound complicated, and can be, we're starting with one of the most simple examples. The keyframes block defined here will simply rotate an element or group of elements counter-clockwise around the Y-axis (which points towards the top of the page): Setting the stage for our animation
The 'stage' is the element in which our animation takes place. The animation will move and rotate in relation to the stage element, which itself remains fixed to the page.
The optional perspective attribute defines how extreme the 3D effect will be as elements move up and down the Z-axis (come out of the page). The larger this distance the less obvious the effect. Without this attribute there is no perspective effect at all.
Setting up Keyframes
A @SoftwareRVG-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes.
While this may sound complicated, and can be, we're starting with one of the most simple examples. The keyframes block defined here will simply rotate an element or group of elements counter-clockwise around the Y-axis (which points towards the top of the page): Setting the stage for our animation
The 'stage' is the element in which our animation takes place. The animation will move and rotate in relation to the stage element, which itself remains fixed to the page.
The optional perspective attribute defines how extreme the 3D effect will be as elements move up and down the Z-axis (come out of the page). The larger this distance the less obvious the effect. Without this attribute there is no perspective effect at all.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.