"Funny Box CSS3"
Bootstrap 4.1.1 Snippet by siberci

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="codescaptain.css"> </head> <body> <div class="orta"> <div class="ana"> <div class="kart"> <div class=" On"></div> <div class=" Arka"></div> </div></div> </div> </body> </html>
body{ margin: 0; padding: 0; } .ana{ perspective: 700px; } .orta{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .kart{ width: 200px; height: 200px; position: relative; transition: transform 1s; transform-style: preserve-3d; animation: pulse 5s infinite alternate; animation-iteration-count: 100; } @keyframes pulse{ 50%{ transform: rotateZ(180deg); } } .On{ background-image: linear-gradient(to left,#00a8ff 0%,#9c88ff 99%,#8c7ae6 100%); } .On, .Arka{ position: absolute; width: 200px; height: 200px; backface-visibility: hidden; animation: ahmet 5s infinite alternate; animation-iteration-count: 1; } @keyframes ahmet{ 0%{ opacity: 0; } 50%{ transform: rotateZ(360deg); width: 300px; height: 300px; border-radius:50%; opacity: 10; } 100%{ opacity: 1; } } .Arka{ background-image: linear-gradient(to left,#c23616 0%,#e84118 99%,#f5f6fa 100%); color:white; transform: rotateY(180deg); }

Related: See More

Rubik Presentation Page

Questions / Comments: