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>
<html>
  <head>
      <meta charset="UTF-8" />
  </head>
  <body>
      <div class="block"></div>
      <div class="block"></div>
      <div class="button" onclick="flipItems();">Animate</div>
  </body>
</html>
 
body {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
}
.block {
  background: linear-gradient(to left, white 0%, black 100%);
  margin: 50px auto;
  width: 200px;
  height: 200px;
  border: solid black 1px;
  -webkit-transition: all 5s;
  -moz-transition: all 5s;
  -ms-transition: all 5s;
  -o-transition: all 5s;
  transition: all 5s;
  -webkit-transform: rotateY(0.00001deg);
}
.block.itemback {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.button {
  border: solid 1px black;
  width: 200px;
  text-align: center;
  margin: auto;
}
 
/*Функции для работы с классами: проверка на присутствие, добавление, удаление*/
function addClass(el, cls) {
  if (!hasClass(el, cls)) return el.className += " "+cls;
}
​
function removeClass(el, cls) {
  var re = new RegExp('(\\s|^)' + cls + '(\\s|$)');
  el.className = el.className.replace(re, ' ');
}
​
function hasClass(el, cls) {
  return (" " + el.className + " ").indexOf(" " + cls + " ") !== -1;
}
​
/*Функция, реализующая переворот*/
/*Для переворота блоку добавляется/убирается класс .itemback*/
function flipItems() {
  var items = document.getElementsByClassName('block');
  for (var i=0; i<items.length; i++) {
    if (hasClass(items[i], 'itemback')) {
      removeClass(items[i], 'itemback');
    }
    else {
      addClass(items[i], 'itemback');
    }
  }
}
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers