css transition

by ian_smithz

HTML

<div id="wrapper">
	<button id="movebtn">Move</button>
	<div id="container">
		<div class="box d1 active">1</div>
		<div class="box d2 active">2</div>
		<div class="box d3 active">3</div>
		<div class="box d4 active">4</div>
		<div class="box d5 active">5</div>
		<div class="box d6 active">6</div>
		<div class="box d7 active">7</div>
		<div class="box d8 active">8</div>
		<div class="box d9 active">9</div>
		<div class="box d10 active">10</div>
	</div>
</div>

CSS

html,
body {
    height:100%;
    margin:0;
    overflow: hidden;
    width: 100%;
}

#wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
    background: green;
}

#container {
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}
.box {
  background-color: red;
  border: 2px solid #000000;
  box-sizing: border-box;
  cursor: pointer;
  height: 25%;
  position: absolute;
  transition-duration: 600ms;
}
.box.active {
  transform: none;
}

.d1 {
  width: 50%;
  top: 0;
  left: 0;
  transform: translateY(-300%);
}


.d2 {
  width: 50%;
  top: 0;
  left: 50%;
  transform: translateY(-300%);
}

.d3 {
    width: 25%;
    top: 25%;
    left: 0;
    transform: translateX(-300%);
}

.d4 {
    width: 25%;
    top: 25%;
    left: 25%;
    transform: translateX(-400%);
}

.d5 {
    width: 25%;
    top: 25%;
    left: 50%;
    transform: translateX(400%);
}

.d6 {
    width: 25%;
    top: 25%;
    left: 75%;
    transform: translateX(300%);
}

.d7 {
    width: 50%;
    top: 50%;
    left: 0;
    transform: translateX(-200%);
}

.d8 {
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(200%);
}

.d9 {
    width: 50%;
    top: 75%;
    left: 0;
    transform: translateY(300%);
}

.d10 {
    width: 50%;
    top: 75%;
    left: 50%;
    transform: translateY(300%);
}

JavaScript

$( "#movebtn" ).on('click', function() {
    $('.box').toggleClass('active')
});