Hybroreal

In this example below you will see how to do a Hybroreal with some HTML / CSS and Javascript

Soem warm structures ;)

Thumbnail
This awesome code was written by pipejesus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pipejesus ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hybroreal</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #312433;
}

.make {
  width: 100%;
  height: 100%;
  display: table;
}
.make .center {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.content {
  position: relative;
  transform-style: preserve-3d;
  width: 50vh;
  height: 50vh;
  margin: 0 auto;
  border-radius: 100%;
  animation: contentRotation 5s infinite linear;
}

.cycle {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  backface-visibility: hidden;
  -webkit-filter: blur(1px);
}

.c-0 {
  transform: rotateY(50deg);
  box-shadow: -5px -5px 28px rgba(224, 82, 82, 0.49), inset 5px 5px 28px rgba(224, 82, 82, 0.49);
  animation: rotate-c-0 15s infinite linear;
}

.c-p-0 {
  transform: rotateZ(50deg);
  box-shadow: -5px -5px 28px rgba(224, 82, 82, 0.49), inset 5px 5px 28px rgba(224, 82, 82, 0.49);
  display: none;
}

@keyframes rotate-c-0 {
  0% {
    transform: rotateX(-50deg);
  }
  100% {
    transform: rotateX(-410deg);
  }
}
.c-1 {
  transform: rotateY(95deg);
  box-shadow: -5px -5px 28px rgba(224, 89, 82, 0.49), inset 5px 5px 28px rgba(224, 89, 82, 0.49);
  animation: rotate-c-1 15s infinite linear;
}

.c-p-1 {
  transform: rotateZ(95deg);
  box-shadow: -5px -5px 28px rgba(224, 89, 82, 0.49), inset 5px 5px 28px rgba(224, 89, 82, 0.49);
  display: none;
}

@keyframes rotate-c-1 {
  0% {
    transform: rotateX(-95deg);
  }
  100% {
    transform: rotateX(-455deg);
  }
}
.c-2 {
  transform: rotateY(140deg);
  box-shadow: -5px -5px 28px rgba(224, 96, 82, 0.49), inset 5px 5px 28px rgba(224, 96, 82, 0.49);
  animation: rotate-c-2 15s infinite linear;
}

.c-p-2 {
  transform: rotateZ(140deg);
  box-shadow: -5px -5px 28px rgba(224, 96, 82, 0.49), inset 5px 5px 28px rgba(224, 96, 82, 0.49);
  display: none;
}

@keyframes rotate-c-2 {
  0% {
    transform: rotateX(-140deg);
  }
  100% {
    transform: rotateX(-500deg);
  }
}
.c-3 {
  transform: rotateY(185deg);
  box-shadow: -5px -5px 28px rgba(224, 103, 82, 0.49), inset 5px 5px 28px rgba(224, 103, 82, 0.49);
  animation: rotate-c-3 15s infinite linear;
}

.c-p-3 {
  transform: rotateZ(185deg);
  box-shadow: -5px -5px 28px rgba(224, 103, 82, 0.49), inset 5px 5px 28px rgba(224, 103, 82, 0.49);
  display: none;
}

@keyframes rotate-c-3 {
  0% {
    transform: rotateX(-185deg);
  }
  100% {
    transform: rotateX(-545deg);
  }
}
.c-4 {
  transform: rotateY(230deg);
  box-shadow: -5px -5px 28px rgba(224, 110, 82, 0.49), inset 5px 5px 28px rgba(224, 110, 82, 0.49);
  animation: rotate-c-4 15s infinite linear;
}

.c-p-4 {
  transform: rotateZ(230deg);
  box-shadow: -5px -5px 28px rgba(224, 110, 82, 0.49), inset 5px 5px 28px rgba(224, 110, 82, 0.49);
  display: none;
}

@keyframes rotate-c-4 {
  0% {
    transform: rotateX(-230deg);
  }
  100% {
    transform: rotateX(-590deg);
  }
}
.c-5 {
  transform: rotateY(275deg);
  box-shadow: -5px -5px 28px rgba(224, 117, 82, 0.49), inset 5px 5px 28px rgba(224, 117, 82, 0.49);
  animation: rotate-c-5 15s infinite linear;
}

.c-p-5 {
  transform: rotateZ(275deg);
  box-shadow: -5px -5px 28px rgba(224, 117, 82, 0.49), inset 5px 5px 28px rgba(224, 117, 82, 0.49);
  display: none;
}

@keyframes rotate-c-5 {
  0% {
    transform: rotateX(-275deg);
  }
  100% {
    transform: rotateX(-635deg);
  }
}
.c-6 {
  transform: rotateY(320deg);
  box-shadow: -5px -5px 28px rgba(224, 124, 82, 0.49), inset 5px 5px 28px rgba(224, 124, 82, 0.49);
  animation: rotate-c-6 15s infinite linear;
}

.c-p-6 {
  transform: rotateZ(320deg);
  box-shadow: -5px -5px 28px rgba(224, 124, 82, 0.49), inset 5px 5px 28px rgba(224, 124, 82, 0.49);
  display: none;
}

@keyframes rotate-c-6 {
  0% {
    transform: rotateX(-320deg);
  }
  100% {
    transform: rotateX(-680deg);
  }
}
.c-7 {
  transform: rotateY(365deg);
  box-shadow: -5px -5px 28px rgba(224, 132, 82, 0.49), inset 5px 5px 28px rgba(224, 132, 82, 0.49);
  animation: rotate-c-7 15s infinite linear;
}

.c-p-7 {
  transform: rotateZ(365deg);
  box-shadow: -5px -5px 28px rgba(224, 132, 82, 0.49), inset 5px 5px 28px rgba(224, 132, 82, 0.49);
  display: none;
}

@keyframes rotate-c-7 {
  0% {
    transform: rotateX(-365deg);
  }
  100% {
    transform: rotateX(-725deg);
  }
}
.c-8 {
  transform: rotateY(410deg);
  box-shadow: -5px -5px 28px rgba(224, 139, 82, 0.49), inset 5px 5px 28px rgba(224, 139, 82, 0.49);
  animation: rotate-c-8 15s infinite linear;
}

.c-p-8 {
  transform: rotateZ(410deg);
  box-shadow: -5px -5px 28px rgba(224, 139, 82, 0.49), inset 5px 5px 28px rgba(224, 139, 82, 0.49);
  display: none;
}

@keyframes rotate-c-8 {
  0% {
    transform: rotateX(-410deg);
  }
  100% {
    transform: rotateX(-770deg);
  }
}
@keyframes contentRotation {
  0% {
    transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg);
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="make">
    <div class="center">      
      <div class="content">
        <div class="cycle c-0"></div>
        <div class="cycle c-p-0"></div>
        <div class="cycle c-1"></div>
        <div class="cycle c-p-1"></div>
        <div class="cycle c-2"></div>
        <div class="cycle c-p-2"></div>
        <div class="cycle c-3"></div>
        <div class="cycle c-p-3"></div>
        <div class="cycle c-4"></div>
        <div class="cycle c-p-4"></div>
        <div class="cycle c-5"></div>
        <div class="cycle c-p-5"></div>
        <div class="cycle c-6"></div>
        <div class="cycle c-p-6"></div>
        <div class="cycle c-7"></div>
        <div class="cycle c-p-7"></div>
      </div>
    </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pipejesus/hybroreal-AbDHh */
body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #312433;
}

.make {
  width: 100%;
  height: 100%;
  display: table;
}
.make .center {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.content {
  position: relative;
  transform-style: preserve-3d;
  width: 50vh;
  height: 50vh;
  margin: 0 auto;
  border-radius: 100%;
  animation: contentRotation 5s infinite linear;
}

.cycle {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  backface-visibility: hidden;
  -webkit-filter: blur(1px);
}

.c-0 {
  transform: rotateY(50deg);
  box-shadow: -5px -5px 28px rgba(224, 82, 82, 0.49), inset 5px 5px 28px rgba(224, 82, 82, 0.49);
  animation: rotate-c-0 15s infinite linear;
}

.c-p-0 {
  transform: rotateZ(50deg);
  box-shadow: -5px -5px 28px rgba(224, 82, 82, 0.49), inset 5px 5px 28px rgba(224, 82, 82, 0.49);
  display: none;
}

@keyframes rotate-c-0 {
  0% {
    transform: rotateX(-50deg);
  }
  100% {
    transform: rotateX(-410deg);
  }
}
.c-1 {
  transform: rotateY(95deg);
  box-shadow: -5px -5px 28px rgba(224, 89, 82, 0.49), inset 5px 5px 28px rgba(224, 89, 82, 0.49);
  animation: rotate-c-1 15s infinite linear;
}

.c-p-1 {
  transform: rotateZ(95deg);
  box-shadow: -5px -5px 28px rgba(224, 89, 82, 0.49), inset 5px 5px 28px rgba(224, 89, 82, 0.49);
  display: none;
}

@keyframes rotate-c-1 {
  0% {
    transform: rotateX(-95deg);
  }
  100% {
    transform: rotateX(-455deg);
  }
}
.c-2 {
  transform: rotateY(140deg);
  box-shadow: -5px -5px 28px rgba(224, 96, 82, 0.49), inset 5px 5px 28px rgba(224, 96, 82, 0.49);
  animation: rotate-c-2 15s infinite linear;
}

.c-p-2 {
  transform: rotateZ(140deg);
  box-shadow: -5px -5px 28px rgba(224, 96, 82, 0.49), inset 5px 5px 28px rgba(224, 96, 82, 0.49);
  display: none;
}

@keyframes rotate-c-2 {
  0% {
    transform: rotateX(-140deg);
  }
  100% {
    transform: rotateX(-500deg);
  }
}
.c-3 {
  transform: rotateY(185deg);
  box-shadow: -5px -5px 28px rgba(224, 103, 82, 0.49), inset 5px 5px 28px rgba(224, 103, 82, 0.49);
  animation: rotate-c-3 15s infinite linear;
}

.c-p-3 {
  transform: rotateZ(185deg);
  box-shadow: -5px -5px 28px rgba(224, 103, 82, 0.49), inset 5px 5px 28px rgba(224, 103, 82, 0.49);
  display: none;
}

@keyframes rotate-c-3 {
  0% {
    transform: rotateX(-185deg);
  }
  100% {
    transform: rotateX(-545deg);
  }
}
.c-4 {
  transform: rotateY(230deg);
  box-shadow: -5px -5px 28px rgba(224, 110, 82, 0.49), inset 5px 5px 28px rgba(224, 110, 82, 0.49);
  animation: rotate-c-4 15s infinite linear;
}

.c-p-4 {
  transform: rotateZ(230deg);
  box-shadow: -5px -5px 28px rgba(224, 110, 82, 0.49), inset 5px 5px 28px rgba(224, 110, 82, 0.49);
  display: none;
}

@keyframes rotate-c-4 {
  0% {
    transform: rotateX(-230deg);
  }
  100% {
    transform: rotateX(-590deg);
  }
}
.c-5 {
  transform: rotateY(275deg);
  box-shadow: -5px -5px 28px rgba(224, 117, 82, 0.49), inset 5px 5px 28px rgba(224, 117, 82, 0.49);
  animation: rotate-c-5 15s infinite linear;
}

.c-p-5 {
  transform: rotateZ(275deg);
  box-shadow: -5px -5px 28px rgba(224, 117, 82, 0.49), inset 5px 5px 28px rgba(224, 117, 82, 0.49);
  display: none;
}

@keyframes rotate-c-5 {
  0% {
    transform: rotateX(-275deg);
  }
  100% {
    transform: rotateX(-635deg);
  }
}
.c-6 {
  transform: rotateY(320deg);
  box-shadow: -5px -5px 28px rgba(224, 124, 82, 0.49), inset 5px 5px 28px rgba(224, 124, 82, 0.49);
  animation: rotate-c-6 15s infinite linear;
}

.c-p-6 {
  transform: rotateZ(320deg);
  box-shadow: -5px -5px 28px rgba(224, 124, 82, 0.49), inset 5px 5px 28px rgba(224, 124, 82, 0.49);
  display: none;
}

@keyframes rotate-c-6 {
  0% {
    transform: rotateX(-320deg);
  }
  100% {
    transform: rotateX(-680deg);
  }
}
.c-7 {
  transform: rotateY(365deg);
  box-shadow: -5px -5px 28px rgba(224, 132, 82, 0.49), inset 5px 5px 28px rgba(224, 132, 82, 0.49);
  animation: rotate-c-7 15s infinite linear;
}

.c-p-7 {
  transform: rotateZ(365deg);
  box-shadow: -5px -5px 28px rgba(224, 132, 82, 0.49), inset 5px 5px 28px rgba(224, 132, 82, 0.49);
  display: none;
}

@keyframes rotate-c-7 {
  0% {
    transform: rotateX(-365deg);
  }
  100% {
    transform: rotateX(-725deg);
  }
}
.c-8 {
  transform: rotateY(410deg);
  box-shadow: -5px -5px 28px rgba(224, 139, 82, 0.49), inset 5px 5px 28px rgba(224, 139, 82, 0.49);
  animation: rotate-c-8 15s infinite linear;
}

.c-p-8 {
  transform: rotateZ(410deg);
  box-shadow: -5px -5px 28px rgba(224, 139, 82, 0.49), inset 5px 5px 28px rgba(224, 139, 82, 0.49);
  display: none;
}

@keyframes rotate-c-8 {
  0% {
    transform: rotateX(-410deg);
  }
  100% {
    transform: rotateX(-770deg);
  }
}
@keyframes contentRotation {
  0% {
    transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg);
  }
}

Comments