HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>codepad Snippets - CSS transform by SoftwareRVG </title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
min-height: 100%;
background: #000000;
}
.circles,
[class*='circle-'] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circles {
overflow: hidden;
}
[class*='circle-'] {
width: 300px;
height: 300px;
border: 1px solid rgba(45, 96, 96, 0.8);
border-radius: 100%;
}
[class*='circle-1'] {
animation: c1 5s linear infinite alternate;
}
@keyframes c1 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(10deg) rotateY(10deg) scale(0.04, 0.04);
}
}
[class*='circle-2'] {
animation: c2 5s linear infinite alternate;
}
@keyframes c2 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(20deg) rotateY(20deg) scale(0.08, 0.08);
}
}
[class*='circle-3'] {
animation: c3 5s linear infinite alternate;
}
@keyframes c3 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(30deg) rotateY(30deg) scale(0.12, 0.12);
}
}
[class*='circle-4'] {
animation: c4 5s linear infinite alternate;
}
@keyframes c4 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(40deg) rotateY(40deg) scale(0.16, 0.16);
}
}
[class*='circle-5'] {
animation: c5 5s linear infinite alternate;
}
@keyframes c5 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(50deg) rotateY(50deg) scale(0.2, 0.2);
}
}
[class*='circle-6'] {
animation: c6 5s linear infinite alternate;
}
@keyframes c6 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(60deg) rotateY(60deg) scale(0.24, 0.24);
}
}
[class*='circle-7'] {
animation: c7 5s linear infinite alternate;
}
@keyframes c7 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(70deg) rotateY(70deg) scale(0.28, 0.28);
}
}
[class*='circle-8'] {
animation: c8 5s linear infinite alternate;
}
@keyframes c8 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(80deg) rotateY(80deg) scale(0.32, 0.32);
}
}
[class*='circle-9'] {
animation: c9 5s linear infinite alternate;
}
@keyframes c9 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(90deg) rotateY(90deg) scale(0.36, 0.36);
}
}
[class*='circle-10'] {
animation: c10 5s linear infinite alternate;
}
@keyframes c10 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(100deg) rotateY(100deg) scale(0.4, 0.4);
}
}
[class*='circle-11'] {
animation: c11 5s linear infinite alternate;
}
@keyframes c11 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(110deg) rotateY(110deg) scale(0.44, 0.44);
}
}
[class*='circle-12'] {
animation: c12 5s linear infinite alternate;
}
@keyframes c12 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(120deg) rotateY(120deg) scale(0.48, 0.48);
}
}
[class*='circle-13'] {
animation: c13 5s linear infinite alternate;
}
@keyframes c13 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(130deg) rotateY(130deg) scale(0.52, 0.52);
}
}
[class*='circle-14'] {
animation: c14 5s linear infinite alternate;
}
@keyframes c14 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(140deg) rotateY(140deg) scale(0.56, 0.56);
}
}
[class*='circle-15'] {
animation: c15 5s linear infinite alternate;
}
@keyframes c15 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(150deg) rotateY(150deg) scale(0.6, 0.6);
}
}
[class*='circle-16'] {
animation: c16 5s linear infinite alternate;
}
@keyframes c16 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(160deg) rotateY(160deg) scale(0.64, 0.64);
}
}
[class*='circle-17'] {
animation: c17 5s linear infinite alternate;
}
@keyframes c17 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(170deg) rotateY(170deg) scale(0.68, 0.68);
}
}
[class*='circle-18'] {
animation: c18 5s linear infinite alternate;
}
@keyframes c18 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(180deg) rotateY(180deg) scale(0.72, 0.72);
}
}
[class*='circle-19'] {
animation: c19 5s linear infinite alternate;
}
@keyframes c19 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(190deg) rotateY(190deg) scale(0.76, 0.76);
}
}
[class*='circle-20'] {
animation: c20 5s linear infinite alternate;
}
@keyframes c20 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(200deg) rotateY(200deg) scale(0.8, 0.8);
}
}
[class*='circle-21'] {
animation: c21 5s linear infinite alternate;
}
@keyframes c21 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(210deg) rotateY(210deg) scale(0.84, 0.84);
}
}
[class*='circle-22'] {
animation: c22 5s linear infinite alternate;
}
@keyframes c22 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(220deg) rotateY(220deg) scale(0.88, 0.88);
}
}
[class*='circle-23'] {
animation: c23 5s linear infinite alternate;
}
@keyframes c23 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(230deg) rotateY(230deg) scale(0.92, 0.92);
}
}
[class*='circle-24'] {
animation: c24 5s linear infinite alternate;
}
@keyframes c24 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(240deg) rotateY(240deg) scale(0.96, 0.96);
}
}
[class*='circle-25'] {
animation: c25 5s linear infinite alternate;
}
@keyframes c25 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(250deg) rotateY(250deg) scale(1, 1);
}
}
[class*='circle-26'] {
animation: c26 5s linear infinite alternate;
}
@keyframes c26 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(260deg) rotateY(260deg) scale(1.04, 1.04);
}
}
[class*='circle-27'] {
animation: c27 5s linear infinite alternate;
}
@keyframes c27 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(270deg) rotateY(270deg) scale(1.08, 1.08);
}
}
[class*='circle-28'] {
animation: c28 5s linear infinite alternate;
}
@keyframes c28 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(280deg) rotateY(280deg) scale(1.12, 1.12);
}
}
[class*='circle-29'] {
animation: c29 5s linear infinite alternate;
}
@keyframes c29 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(290deg) rotateY(290deg) scale(1.16, 1.16);
}
}
[class*='circle-30'] {
animation: c30 5s linear infinite alternate;
}
@keyframes c30 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(300deg) rotateY(300deg) scale(1.2, 1.2);
}
}
[class*='circle-31'] {
animation: c31 5s linear infinite alternate;
}
@keyframes c31 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(310deg) rotateY(310deg) scale(1.24, 1.24);
}
}
[class*='circle-32'] {
animation: c32 5s linear infinite alternate;
}
@keyframes c32 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(320deg) rotateY(320deg) scale(1.28, 1.28);
}
}
[class*='circle-33'] {
animation: c33 5s linear infinite alternate;
}
@keyframes c33 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(330deg) rotateY(330deg) scale(1.32, 1.32);
}
}
[class*='circle-34'] {
animation: c34 5s linear infinite alternate;
}
@keyframes c34 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(340deg) rotateY(340deg) scale(1.36, 1.36);
}
}
[class*='circle-35'] {
animation: c35 5s linear infinite alternate;
}
@keyframes c35 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(350deg) rotateY(350deg) scale(1.4, 1.4);
}
}
[class*='circle-36'] {
animation: c36 5s linear infinite alternate;
}
@keyframes c36 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(360deg) rotateY(360deg) scale(1.44, 1.44);
}
}
[class*='circle-37'] {
animation: c37 5s linear infinite alternate;
}
@keyframes c37 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(370deg) rotateY(370deg) scale(1.48, 1.48);
}
}
[class*='circle-38'] {
animation: c38 5s linear infinite alternate;
}
@keyframes c38 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(380deg) rotateY(380deg) scale(1.52, 1.52);
}
}
[class*='circle-39'] {
animation: c39 5s linear infinite alternate;
}
@keyframes c39 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(390deg) rotateY(390deg) scale(1.56, 1.56);
}
}
[class*='circle-40'] {
animation: c40 5s linear infinite alternate;
}
@keyframes c40 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(400deg) rotateY(400deg) scale(1.6, 1.6);
}
}
[class*='circle-41'] {
animation: c41 5s linear infinite alternate;
}
@keyframes c41 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(410deg) rotateY(410deg) scale(1.64, 1.64);
}
}
[class*='circle-42'] {
animation: c42 5s linear infinite alternate;
}
@keyframes c42 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(420deg) rotateY(420deg) scale(1.68, 1.68);
}
}
[class*='circle-43'] {
animation: c43 5s linear infinite alternate;
}
@keyframes c43 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(430deg) rotateY(430deg) scale(1.72, 1.72);
}
}
[class*='circle-44'] {
animation: c44 5s linear infinite alternate;
}
@keyframes c44 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(440deg) rotateY(440deg) scale(1.76, 1.76);
}
}
[class*='circle-45'] {
animation: c45 5s linear infinite alternate;
}
@keyframes c45 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(450deg) rotateY(450deg) scale(1.8, 1.8);
}
}
[class*='circle-46'] {
animation: c46 5s linear infinite alternate;
}
@keyframes c46 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(460deg) rotateY(460deg) scale(1.84, 1.84);
}
}
[class*='circle-47'] {
animation: c47 5s linear infinite alternate;
}
@keyframes c47 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(470deg) rotateY(470deg) scale(1.88, 1.88);
}
}
[class*='circle-48'] {
animation: c48 5s linear infinite alternate;
}
@keyframes c48 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(480deg) rotateY(480deg) scale(1.92, 1.92);
}
}
[class*='circle-49'] {
animation: c49 5s linear infinite alternate;
}
@keyframes c49 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(490deg) rotateY(490deg) scale(1.96, 1.96);
}
}
[class*='circle-50'] {
animation: c50 5s linear infinite alternate;
}
@keyframes c50 {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1, 1);
}
100% {
transform: rotateX(500deg) rotateY(500deg) scale(2, 2);
}
}
</style>
<script src="//assets.codepen.io/assets/libs/prefixfree.min-a2279db4c4c421e9795be3e1713aff75.js"></script>
</head>
<body translate="no" >
<div class='container'>
<div class='circles'>
<div class='circle-1'></div>
<div class='circle-2'></div>
<div class='circle-3'></div>
<div class='circle-4'></div>
<div class='circle-5'></div>
<div class='circle-6'></div>
<div class='circle-7'></div>
<div class='circle-8'></div>
<div class='circle-9'></div>
<div class='circle-10'></div>
<div class='circle-11'></div>
<div class='circle-12'></div>
<div class='circle-13'></div>
<div class='circle-14'></div>
<div class='circle-15'></div>
<div class='circle-16'></div>
<div class='circle-17'></div>
<div class='circle-18'></div>
<div class='circle-19'></div>
<div class='circle-20'></div>
<div class='circle-21'></div>
<div class='circle-22'></div>
<div class='circle-23'></div>
<div class='circle-24'></div>
<div class='circle-25'></div>
<div class='circle-26'></div>
<div class='circle-27'></div>
<div class='circle-28'></div>
<div class='circle-29'></div>
<div class='circle-30'></div>
<div class='circle-31'></div>
<div class='circle-32'></div>
<div class='circle-33'></div>
<div class='circle-34'></div>
<div class='circle-35'></div>
<div class='circle-36'></div>
<div class='circle-37'></div>
<div class='circle-38'></div>
<div class='circle-39'></div>
<div class='circle-40'></div>
<div class='circle-41'></div>
<div class='circle-42'></div>
<div class='circle-43'></div>
<div class='circle-44'></div>
<div class='circle-45'></div>
<div class='circle-46'></div>
<div class='circle-47'></div>
<div class='circle-48'></div>
<div class='circle-49'></div>
<div class='circle-50'></div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
1 Response
This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
CSS transform by SoftwareRVG
La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.
Si la propiedad tiene un valor diferente a none, se creará un contexto de pila. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.