Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
​
<meta name="robots" content="noindex">
​
<html lang="en-US">
​
<head>
  <meta charset="UTF-8">
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <title>CSS Cube Test</title>
  <meta name="theme-color" content="#fff">
  <meta name="msapplication-TileColor" content="#fff">
​
​
</head>
​
<body>
  <div id="loader-wrapper">
    <div id="loader"></div>
 
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
 
</div>
​
  <div class="ska">
    <ul class="accordion">
​
      <li class="kusok" id="kus1">
        <div class="svetki" id="svetki1"></div>
        <label class="vigl" for="min1"> </label>
​
        <li class="kusok" id="kus2">
          <div class="svetki" id="svetki2"></div>
          <label class="vigl" for="min2"> </label>
​
​
        </li>
        <li class="kusok" id="kus3">
          <div class="svetki" id="svetki3"></div>
          <label class="vigl" for="min3"> </label>
​
​
        </li>
        <li class="kusok" id="kus4">
          <div class="svetki" id="svetki4"></div>
          <label class="vigl" for="min4"> </label>
​
        </li>
        <li class="kusok" id="kus5">
          <div class="svetki" id="svetki5"></div>
          <label class="vigl" for="min5"> </label>
​
​
        </li>
        <li class="kusok" id="kus6">
          <div class="svetki" id="svetki6"></div>
          <label class="vigl" for="min6"> </label>
​
​
        </li>
    </ul>
  </div>
  <div id="main">
​
    <div id="fors">
​
      <div class="all1">
        <div id="a1"></div>
​
        <div class="all12">
        </div>
      </div>
​
​
​
      <div class="all6">
        <div id="a4"></div>
​
​
        <div class="all62">
        </div>
      </div>
​
​
​
      <div class="all2">
        <div id="a2"></div>
​
        <div class="all22">
        </div>
      </div>
​
​
​
      <div class="all3">
        <div id="a3"></div>
​
        <div class="all32">
        </div>
​
      </div>
      <div class="all4">
      </div>
      <div class="all42">
      </div>
​
​
​
​
    </div>
    <div id="cersircle">
​
    </div>
​
    <div id="wrapper">
      <div class="sircle2">
        <div id="anim"></div>
        <div class="sircle1">
        </div>
​
      </div>
​
      <input type="checkbox" class="nag" id="min1" />
      <input type="checkbox" class="nag" id="min2" />
      <input type="checkbox" class="nag" id="min3" />
      <input type="checkbox" class="nag" id="min4" />
      <input type="checkbox" class="nag" id="min5" />
      <input type="checkbox" class="nag" id="min6" />
​
      <div id="cube">
​
        <div class="container1">
          <div class="back sidi">
          </div>
​
​
          <div class="left sidi">
          </div>
​
​
          <div class="right sidi">
          </div>
​
​
          <div class="top sidi">
          </div>
​
​
          <div class="bottom sidi">
          </div>
​
​
          <div class="front sidi">
          </div>
        </div>
​
​
        <div class="side" id="side1">
          <div class="if">
            <div id="cube56"></div>
            <div class="cube1" id="cube1">
            </div>
          </div>
        </div>
​
​
        <div class="side" id="side2">
          <div class="if">
            <div id="cube56"></div>
            <div class="cube1" id="cube2">
            </div>
          </div>
        </div>
​
​
        <div class="side" id="side3">
          <div class="if">
            <div id="cube56"></div>
            <div class="cube1" id="cube3">
            </div>
          </div>
        </div>
​
​
        <div class="side" id="side4">
          <div class="if">
            <div id="cube56"></div>
            <div class="cube1" id="cube4">
            </div>
          </div>
        </div>
​
​
        <div class="side" id="side5">
          <div class="if">
            <div id="cube56"></div>
            <div class="cube1" id="cube5">
            </div>
          </div>
        </div>
​
​
        <div class="side" id="side6">
          <div class="if">
            <div id="cube56"></div>
            <div class="cube1" id="cube6">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
​
  <div class="one" id="one1">
    <div class="ex" id="ex1">&#10006;</div>
    <p class="insetshadow">contacts</p>
    <p class="insetshadow formar">nicecrimeice@gmail.com</p>
    <p class="insetshadow">+380631783320</p>
    
  </div>
  <div class="one" id="one2">
    <div class="ex" id="ex2">&#10006;</div>
    <p class="insetshadow">reviews</p>
  </div>
  <div class="one" id="one3">
    <div class="ex" id="ex3">&#10006;</div>
    <p class="insetshadow">partners</p>
  </div>
  <div class="one" id="one4">
    <div class="ex" id="ex4">&#10006;</div>
    <p class="insetshadow">about me</p>
  </div>
  <div class="one" id="one5">
    <div class="ex" id="ex5">&#10006;</div>
    <p class="insetshadow">CV</p>
  </div>
  <div class="one" id="one6">
    <div class="ex" id="ex6">&#10006;</div>
    <p class="insetshadow">my works</p>
  </div>
​
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <!-- //////////////////////////////////////////////////////////   -->
  <script>
    $(".ex").click(function () {
      $( "#kus1,#kus2,#kus3,#kus4,#kus5,#kus6" ).css({"background-color":"#0090ff"
                      });
      $("#main").css({"-webkit-filter": "blur(0px)",
                      "-moz-filter": "blur(0px)",
                      "filter": "blur(0px)",
                      "filter": "url('blur.svg#blur')"});
      $("#cube").css({"-webkit-animation": "rotate 7s infinite linear",
                      "animation": "rotate 7s infinite linear",
                      "-webkit-transform": ""
                      });
      
  
​
            });
    $( ".kusok" ).click(function() {
      $("#main").css({"-webkit-filter": "blur(0px)",
                      "-moz-filter": "blur(0px)",
                      "filter": "blur(0px)",
                      "filter": "url('blur.svg#blur')"});
      $( ".one" ).css({display: "none"});
      setTimeout( function(){
            $( "#main" ).css({"-webkit-filter": "blur(9px)",
                      "-moz-filter": "blur(9px)",
                      "filter": "url('blur.svg#blur')",
                      "filter": "blur(9px)",
                      });
        },1000);
      
            });
  </script>
  <!-- //////////////////////////////////////////////////////////   -->
  <script>
    $( "#kus1" ).click(function() {
      $( "#kus1" ).css({"background-color":"#0090ff"
                      });
            $( "#kus2,#kus3,#kus4,#kus5,#kus6" ).css({"background-color":"rgba(45, 45, 45, 0)"
                      });
   
    $( "#cube" ).css({"-webkit-animation": "contacti 1s 1 ease-in-out",
                      "animation": "contacti 1s 1 ease-in-out",
                      "-webkit-transform": "rotateX(0deg) rotateY(0deg)"
                      });
      setTimeout( function(){
      $( "#one1" ).css({display: "block"});
        },1000);
 });
$("#ex1").click(function () {
  $("#one1").hide(10);
});
  </script>
​
  <script>
    $( "#kus2" ).click(function() {
      $( "#kus2" ).css({"background-color":"#0090ff"
                      });
    $( "#kus1,#kus3,#kus4,#kus5,#kus6" ).css({"background-color":"rgba(45, 45, 45, 0)"
                      });
   
    $( "#cube" ).css({"-webkit-animation": "mcode 1s 1 ease-in-out",
                      "animation": "mcode 1s 1 ease-in-out",
                      "-webkit-transform": "rotateX(0deg) rotateY(-270deg)"
                      });
 setTimeout( function(){
      $( "#one2" ).css({display: "block"});
        },1000);
 });
$("#ex2").click(function () {
  $("#one2").hide(10);
});
  </script>
​
  <script>
    $( "#kus3" ).click(function() {
      $( "#kus3" ).css({"background-color":"#0090ff"
                      });
            $( "#kus1,#kus2,#kus4,#kus5,#kus6" ).css({"background-color":"rgba(45, 45, 45, 0)"
                      });
   
    $( "#cube" ).css({"-webkit-animation": "otizvi 1s 1 ease-in-out",
                      "animation": "otizvi 1s 1 ease-in-out",
                      "-webkit-transform": "rotateX(90deg) rotateY(-0deg)"
                      });
 setTimeout( function(){
      $( "#one3" ).css({display: "block"});
        },1000);
 });
$("#ex3").click(function () {
  $("#one3").hide(10);
});
  </script>
​
  <script>
    $( "#kus4" ).click(function() {
      $( "#kus4" ).css({"background-color":"#0090ff"
                      });
        $( "#kus1,#kus2,#kus3,#kus5,#kus6" ).css({"background-color":"rgba(45, 45, 45, 0)"
                      });
   
    $( "#cube" ).css({"-webkit-animation": "mceve 1s 1 ease-in-out",
                      "animation": "mceve 1s 1 ease-in-out",
                      "-webkit-transform": "rotateX(269deg) rotateY(-0deg)"
                      });
 setTimeout( function(){
      $( "#one4" ).css({display: "block"});
        },1000);
 });
$("#ex4").click(function () {
  $("#one4").hide(10);
});
  </script>
​
  <script>
    $( "#kus5" ).click(function() {
      $( "#kus5" ).css({"background-color":"#0090ff"
                      });
            $( "#kus1,#kus2,#kus3,#kus4,#kus6" ).css({"background-color":"rgba(45, 45, 45, 0)"
                      });
   
    $( "#cube" ).css({"-webkit-animation": "parter 1s 1 ease-in-out",
                      "animation": "parter 1s 1 ease-in-out",
                      "-webkit-transform": "rotateX(0deg) rotateY(-180deg)"
                      });
 setTimeout( function(){
      $( "#one5" ).css({display: "block"});
        },1000);
 });
$("#ex5").click(function () {
  $("#one5").hide(10);
});
  </script>
​
  <script>
    $( "#kus6" ).click(function() {
      $( "#kus6" ).css({"background-color":"#0090ff"
                      });
        $( "#kus1,#kus2,#kus3,#kus4,#kus5" ).css({"background-color":"rgba(45, 45, 45, 0)"
                      });
   
    $( "#cube" ).css({"-webkit-animation": "promen 1s 1 ease-in-out",
                      "animation": "promen 1s 1 ease-in-out",
                      "-webkit-transform": "rotateX(0deg) rotateY(270deg)"
                      });
setTimeout( function(){
      $( "#one6" ).css({display: "block"});
        },1000);
 });
$("#ex6").click(function () {
  $("#one6").hide(10);
});
  </script>
  <!--   <script>
    $("#min1").click(function() {
  $("#kus1").css("background-color","#005eff");
});
$("#mydiv").focusout(function() {
  $("#mydiv").css("background","white");
});
  </script> -->
  <!--   <script>
elms = document.getElementsByTagName('div');
for(var i=0;i<=elms.length;i++){
    elms[i].onmouseover = function(){
        this.style.border = '#990000 1px solid';
    }
    elms[i].onmouseout = function(){
        this.style.border = '';
    }
}
</script> -->
  <!--  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    $(function(){
      $(document).mousemove(function(e){
        $('#cube:hover').css({
          'transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
        });
      });
    });
  </script> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>$(document).ready(function() {
    
    setTimeout(function(){
        $('body').addClass('loaded');
        
    }, 3000);
    
});</script>
</body>
​
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
niceicepro
0viewers