Home Image Effect

Tags:

CSS/JS Breake the wall hover image effect

 43 | 0 |  0

View Full Width
            
Hover me
Breake the wall
            @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
html,
body {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #000;
  perspective: 1000px;
}
.main:before {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 1;
  content: '';
  opacity: 0.05;
}
.main .row {
  position: absolute;
  width: 100%;
  left: 0;
}

.main {
  overflow: hidden;
}
.main:hover .item {
  transform: rotateY(0deg) !important;
}
.main:hover .msg {
  opacity: 0;
}

.item {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-image: url("https://codeshow.io.vn/ckfinder/userfiles/files/photo-1453106037972-08fbfe790762.jpg");
  height: 100%;
}
.item.row1-col1 {
  transform: rotateX(-24deg) rotateY(17deg) rotateZ(-2deg);
  -moz-transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out;
  -o-transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out;
  -webkit-transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out;
  transition: transform 0.92s ease-in-out, opacity 2.11s ease-in-out;
}
.item.row1-col2 {
  transform: rotateX(25deg) rotateY(-23deg) rotateZ(0deg);
  -moz-transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out;
  -o-transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out;
  -webkit-transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out;
  transition: transform 0.31s ease-in-out, opacity 1.31s ease-in-out;
}
.item.row1-col3 {
  transform: rotateX(-18deg) rotateY(22deg) rotateZ(2deg);
  -moz-transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out;
  -o-transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out;
  -webkit-transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out;
  transition: transform 0.11s ease-in-out, opacity 2.14s ease-in-out;
}
.item.row1-col4 {
  transform: rotateX(-3deg) rotateY(-12deg) rotateZ(-1deg);
  -moz-transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out;
  -o-transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out;
  -webkit-transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out;
  transition: transform 0.74s ease-in-out, opacity 0.39s ease-in-out;
}
.item.row1-col5 {
  transform: rotateX(-23deg) rotateY(21deg) rotateZ(0deg);
  -moz-transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out;
  -o-transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out;
  -webkit-transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out;
  transition: transform 0.18s ease-in-out, opacity 2.2s ease-in-out;
}
.item.row1-col6 {
  transform: rotateX(-8deg) rotateY(-23deg) rotateZ(2deg);
  -moz-transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out;
  -o-transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out;
  -webkit-transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out;
  transition: transform 0.93s ease-in-out, opacity 0.4s ease-in-out;
}
.item.row1-col7 {
  transform: rotateX(-11deg) rotateY(-22deg) rotateZ(2deg);
  -moz-transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out;
  -o-transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out;
  -webkit-transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out;
  transition: transform 0.7s ease-in-out, opacity 1.41s ease-in-out;
}
.item.row1-col8 {
  transform: rotateX(15deg) rotateY(-20deg) rotateZ(4deg);
  -moz-transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out;
  -o-transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out;
  -webkit-transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out;
  transition: transform 0.49s ease-in-out, opacity 1.14s ease-in-out;
}
.item.row1-col9 {
  transform: rotateX(3deg) rotateY(-10deg) rotateZ(-1deg);
  -moz-transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out;
  -o-transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out;
  -webkit-transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out;
  transition: transform 0.62s ease-in-out, opacity 0.94s ease-in-out;
}
.item.row1-col10 {
  transform: rotateX(25deg) rotateY(-22deg) rotateZ(2deg);
  -moz-transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out;
  -o-transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out;
  -webkit-transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out;
  transition: transform 0.18s ease-in-out, opacity 1.32s ease-in-out;
}
.item.row1-col11 {
  transform: rotateX(21deg) rotateY(3deg) rotateZ(-2deg);
  -moz-transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out;
  -o-transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out;
  -webkit-transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out;
  transition: transform 0.46s ease-in-out, opacity 0.72s ease-in-out;
}
.item.row1-col12 {
  transform: rotateX(-5deg) rotateY(5deg) rotateZ(4deg);
  -moz-transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out;
  -o-transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out;
  -webkit-transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out;
  transition: transform 0.92s ease-in-out, opacity 0.86s ease-in-out;
}
.item.row1-col13 {
  transform: rotateX(4deg) rotateY(-14deg) rotateZ(4deg);
  -moz-transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out;
  -o-transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out;
  -webkit-transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out;
  transition: transform 0.88s ease-in-out, opacity 1.86s ease-in-out;
}
.item.row1-col14 {
  transform: rotateX(-2deg) rotateY(-22deg) rotateZ(-2deg);
  -moz-transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out;
  -o-transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out;
  -webkit-transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out;
  transition: transform 0.49s ease-in-out, opacity 0.55s ease-in-out;
}
.item.row1-col15 {
  transform: rotateX(24deg) rotateY(4deg) rotateZ(-1deg);
  -moz-transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out;
  -o-transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out;
  -webkit-transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out;
  transition: transform 0.37s ease-in-out, opacity 1.03s ease-in-out;
}
.item.row1-col16 {
  transform: rotateX(-2deg) rotateY(-7deg) rotateZ(3deg);
  -moz-transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out;
  -o-transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out;
  -webkit-transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out;
  transition: transform 0.07s ease-in-out, opacity 0.92s ease-in-out;
}
.item.row1-col17 {
  transform: rotateX(19deg) rotateY(21deg) rotateZ(0deg);
  -moz-transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out;
  -o-transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out;
  -webkit-transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out;
  transition: transform 0.74s ease-in-out, opacity 0.54s ease-in-out;
}
.item.row1-col18 {
  transform: rotateX(10deg) rotateY(8deg) rotateZ(1deg);
  -moz-transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out;
  -o-transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out;
  -webkit-transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out;
  transition: transform 0.05s ease-in-out, opacity 1.34s ease-in-out;
}
.item.row2-col1 {
  transform: rotateX(13deg) rotateY(3deg) rotateZ(-2deg);
  -moz-transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out;
  -o-transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out;
  -webkit-transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out;
  transition: transform 0.39s ease-in-out, opacity 0.43s ease-in-out;
}
.item.row2-col2 {
  transform: rotateX(-21deg) rotateY(20deg) rotateZ(4deg);
  -moz-transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out;
  -o-transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out;
  -webkit-transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out;
  transition: transform 0.08s ease-in-out, opacity 1.15s ease-in-out;
}
.item.row2-col3 {
  transform: rotateX(-3deg) rotateY(-8deg) rotateZ(3deg);
  -moz-transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out;
  -o-transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out;
  -webkit-transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out;
  transition: transform 0.99s ease-in-out, opacity 2.33s ease-in-out;
}
.item.row2-col4 {
  transform: rotateX(-23deg) rotateY(-1deg) rotateZ(4deg);
  -moz-transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out;
  -o-transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out;
  -webkit-transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out;
  transition: transform 0.49s ease-in-out, opacity 0.07s ease-in-out;
}
.item.row2-col5 {
  transform: rotateX(3deg) rotateY(8deg) rotateZ(-3deg);
  -moz-transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out;
  -o-transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out;
  -webkit-transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out;
  transition: transform 0.7s ease-in-out, opacity 1.01s ease-in-out;
}
.item.row2-col6 {
  transform: rotateX(17deg) rotateY(-15deg) rotateZ(4deg);
  -moz-transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out;
  -webkit-transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 1.2s ease-in-out;
}
.item.row2-col7 {
  transform: rotateX(9deg) rotateY(4deg) rotateZ(-2deg);
  -moz-transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out;
  -o-transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out;
  -webkit-transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out;
  transition: transform 0.58s ease-in-out, opacity 1.03s ease-in-out;
}
.item.row2-col8 {
  transform: rotateX(21deg) rotateY(-9deg) rotateZ(2deg);
  -moz-transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out;
  -o-transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out;
  -webkit-transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.69s ease-in-out, opacity 0.45s ease-in-out;
}
.item.row2-col9 {
  transform: rotateX(5deg) rotateY(-23deg) rotateZ(-1deg);
  -moz-transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out;
  -o-transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out;
  -webkit-transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out;
  transition: transform 0.72s ease-in-out, opacity 2.43s ease-in-out;
}
.item.row2-col10 {
  transform: rotateX(20deg) rotateY(-2deg) rotateZ(1deg);
  -moz-transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out;
  -o-transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out;
  -webkit-transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out;
  transition: transform 0.91s ease-in-out, opacity 2.08s ease-in-out;
}
.item.row2-col11 {
  transform: rotateX(-19deg) rotateY(10deg) rotateZ(3deg);
  -moz-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  -o-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  -webkit-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}
.item.row2-col12 {
  transform: rotateX(-4deg) rotateY(-23deg) rotateZ(-2deg);
  -moz-transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out;
  -o-transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out;
  -webkit-transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out;
  transition: transform 0.15s ease-in-out, opacity 0.94s ease-in-out;
}
.item.row2-col13 {
  transform: rotateX(8deg) rotateY(18deg) rotateZ(0deg);
  -moz-transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out;
  -o-transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out;
  -webkit-transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out;
  transition: transform 0.24s ease-in-out, opacity 1.28s ease-in-out;
}
.item.row2-col14 {
  transform: rotateX(16deg) rotateY(-14deg) rotateZ(-1deg);
  -moz-transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out;
  -o-transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out;
  -webkit-transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out;
  transition: transform 0.89s ease-in-out, opacity 0.8s ease-in-out;
}
.item.row2-col15 {
  transform: rotateX(6deg) rotateY(-24deg) rotateZ(-1deg);
  -moz-transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out;
  -o-transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out;
  -webkit-transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out;
  transition: transform 0.38s ease-in-out, opacity 0.53s ease-in-out;
}
.item.row2-col16 {
  transform: rotateX(9deg) rotateY(5deg) rotateZ(-3deg);
  -moz-transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out;
  -o-transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out;
  -webkit-transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 0.29s ease-in-out;
}
.item.row2-col17 {
  transform: rotateX(-7deg) rotateY(22deg) rotateZ(-3deg);
  -moz-transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out;
  -o-transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out;
  -webkit-transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out;
  transition: transform 0.72s ease-in-out, opacity 1.38s ease-in-out;
}
.item.row2-col18 {
  transform: rotateX(6deg) rotateY(19deg) rotateZ(2deg);
  -moz-transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out;
  -o-transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out;
  -webkit-transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out;
  transition: transform 0.37s ease-in-out, opacity 0.9s ease-in-out;
}
.item.row3-col1 {
  transform: rotateX(-11deg) rotateY(-2deg) rotateZ(1deg);
  -moz-transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out;
  -o-transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out;
  -webkit-transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out;
  transition: transform 0.36s ease-in-out, opacity 1.41s ease-in-out;
}
.item.row3-col2 {
  transform: rotateX(-23deg) rotateY(14deg) rotateZ(-2deg);
  -moz-transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out;
  -o-transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out;
  -webkit-transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out;
  transition: transform 0.12s ease-in-out, opacity 1.08s ease-in-out;
}
.item.row3-col3 {
  transform: rotateX(23deg) rotateY(-24deg) rotateZ(3deg);
  -moz-transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out;
  -o-transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out;
  -webkit-transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out;
  transition: transform 0.77s ease-in-out, opacity 1.21s ease-in-out;
}
.item.row3-col4 {
  transform: rotateX(15deg) rotateY(-9deg) rotateZ(2deg);
  -moz-transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out;
  -o-transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out;
  -webkit-transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out;
  transition: transform 0.55s ease-in-out, opacity 2.3s ease-in-out;
}
.item.row3-col5 {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(4deg);
  -moz-transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out;
  -o-transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out;
  -webkit-transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out;
  transition: transform 0.56s ease-in-out, opacity 2.06s ease-in-out;
}
.item.row3-col6 {
  transform: rotateX(-7deg) rotateY(23deg) rotateZ(-2deg);
  -moz-transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out;
  -o-transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out;
  -webkit-transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out;
  transition: transform 0.49s ease-in-out, opacity 1.49s ease-in-out;
}
.item.row3-col7 {
  transform: rotateX(21deg) rotateY(15deg) rotateZ(3deg);
  -moz-transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out;
  -o-transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out;
  -webkit-transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out;
  transition: transform 0.83s ease-in-out, opacity 2.01s ease-in-out;
}
.item.row3-col8 {
  transform: rotateX(22deg) rotateY(-23deg) rotateZ(4deg);
  -moz-transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out;
  -o-transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out;
  -webkit-transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out;
  transition: transform 0.57s ease-in-out, opacity 2.2s ease-in-out;
}
.item.row3-col9 {
  transform: rotateX(22deg) rotateY(10deg) rotateZ(2deg);
  -moz-transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out;
  -o-transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out;
  -webkit-transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out;
  transition: transform 0.62s ease-in-out, opacity 1.46s ease-in-out;
}
.item.row3-col10 {
  transform: rotateX(-23deg) rotateY(2deg) rotateZ(1deg);
  -moz-transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out;
  -o-transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out;
  -webkit-transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out;
  transition: transform 0.65s ease-in-out, opacity 0.9s ease-in-out;
}
.item.row3-col11 {
  transform: rotateX(14deg) rotateY(-13deg) rotateZ(-3deg);
  -moz-transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out;
  -o-transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out;
  -webkit-transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out;
  transition: transform 0.84s ease-in-out, opacity 0.02s ease-in-out;
}
.item.row3-col12 {
  transform: rotateX(9deg) rotateY(25deg) rotateZ(4deg);
  -moz-transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out;
  -o-transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out;
  -webkit-transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out;
  transition: transform 0.05s ease-in-out, opacity 1.43s ease-in-out;
}
.item.row3-col13 {
  transform: rotateX(-23deg) rotateY(-20deg) rotateZ(-2deg);
  -moz-transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out;
  -o-transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out;
  -webkit-transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out;
  transition: transform 0.79s ease-in-out, opacity 0.92s ease-in-out;
}
.item.row3-col14 {
  transform: rotateX(-12deg) rotateY(12deg) rotateZ(2deg);
  -moz-transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out;
  -o-transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out;
  -webkit-transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out;
  transition: transform 0.62s ease-in-out, opacity 1.97s ease-in-out;
}
.item.row3-col15 {
  transform: rotateX(-5deg) rotateY(-13deg) rotateZ(1deg);
  -moz-transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out;
  -webkit-transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 2.2s ease-in-out;
}
.item.row3-col16 {
  transform: rotateX(6deg) rotateY(24deg) rotateZ(4deg);
  -moz-transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out;
  -o-transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out;
  -webkit-transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out;
  transition: transform 0.13s ease-in-out, opacity 0.06s ease-in-out;
}
.item.row3-col17 {
  transform: rotateX(13deg) rotateY(20deg) rotateZ(2deg);
  -moz-transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out;
  -o-transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out;
  -webkit-transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out;
  transition: transform 0.23s ease-in-out, opacity 1.41s ease-in-out;
}
.item.row3-col18 {
  transform: rotateX(15deg) rotateY(-5deg) rotateZ(-2deg);
  -moz-transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out;
  -o-transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out;
  -webkit-transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out;
  transition: transform 0.1s ease-in-out, opacity 0.67s ease-in-out;
}
.item.row4-col1 {
  transform: rotateX(7deg) rotateY(-2deg) rotateZ(1deg);
  -moz-transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out;
  -o-transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out;
  -webkit-transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out;
  transition: transform 0.12s ease-in-out, opacity 1.74s ease-in-out;
}
.item.row4-col2 {
  transform: rotateX(-22deg) rotateY(13deg) rotateZ(-2deg);
  -moz-transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out;
  -o-transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out;
  -webkit-transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out;
  transition: transform 0.8s ease-in-out, opacity 1.85s ease-in-out;
}
.item.row4-col3 {
  transform: rotateX(12deg) rotateY(12deg) rotateZ(3deg);
  -moz-transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out;
  -o-transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out;
  -webkit-transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out;
  transition: transform 0.84s ease-in-out, opacity 0.22s ease-in-out;
}
.item.row4-col4 {
  transform: rotateX(-15deg) rotateY(12deg) rotateZ(2deg);
  -moz-transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out;
  -o-transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out;
  -webkit-transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out;
  transition: transform 0.68s ease-in-out, opacity 0.76s ease-in-out;
}
.item.row4-col5 {
  transform: rotateX(1deg) rotateY(-21deg) rotateZ(-3deg);
  -moz-transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out;
  -o-transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out;
  -webkit-transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out;
  transition: transform 0.61s ease-in-out, opacity 0.44s ease-in-out;
}
.item.row4-col6 {
  transform: rotateX(21deg) rotateY(2deg) rotateZ(2deg);
  -moz-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
  -o-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
  -webkit-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
  transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
}
.item.row4-col7 {
  transform: rotateX(-13deg) rotateY(20deg) rotateZ(3deg);
  -moz-transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out;
  -o-transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out;
  -webkit-transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out;
  transition: transform 0.47s ease-in-out, opacity 0.82s ease-in-out;
}
.item.row4-col8 {
  transform: rotateX(-14deg) rotateY(22deg) rotateZ(-3deg);
  -moz-transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out;
  -o-transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out;
  -webkit-transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out;
  transition: transform 0.87s ease-in-out, opacity 1.85s ease-in-out;
}
.item.row4-col9 {
  transform: rotateX(-17deg) rotateY(14deg) rotateZ(3deg);
  -moz-transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out;
  -o-transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out;
  -webkit-transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out;
  transition: transform 0.65s ease-in-out, opacity 1.37s ease-in-out;
}
.item.row4-col10 {
  transform: rotateX(5deg) rotateY(3deg) rotateZ(3deg);
  -moz-transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out;
  -o-transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out;
  -webkit-transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out;
  transition: transform 0.39s ease-in-out, opacity 1.95s ease-in-out;
}
.item.row4-col11 {
  transform: rotateX(-18deg) rotateY(-7deg) rotateZ(-2deg);
  -moz-transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out;
  -o-transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out;
  -webkit-transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out;
  transition: transform 0.55s ease-in-out, opacity 0.63s ease-in-out;
}
.item.row4-col12 {
  transform: rotateX(-10deg) rotateY(18deg) rotateZ(-1deg);
  -moz-transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out;
  -o-transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out;
  -webkit-transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 2.43s ease-in-out;
}
.item.row4-col13 {
  transform: rotateX(-23deg) rotateY(-7deg) rotateZ(3deg);
  -moz-transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out;
  -o-transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out;
  -webkit-transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out;
  transition: transform 0.7s ease-in-out, opacity 0.91s ease-in-out;
}
.item.row4-col14 {
  transform: rotateX(-16deg) rotateY(17deg) rotateZ(4deg);
  -moz-transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out;
  -o-transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out;
  -webkit-transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out;
  transition: transform 0.63s ease-in-out, opacity 1.01s ease-in-out;
}
.item.row4-col15 {
  transform: rotateX(-18deg) rotateY(-19deg) rotateZ(1deg);
  -moz-transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out;
  -o-transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out;
  -webkit-transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out;
  transition: transform 0.82s ease-in-out, opacity 2.4s ease-in-out;
}
.item.row4-col16 {
  transform: rotateX(14deg) rotateY(1deg) rotateZ(-3deg);
  -moz-transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out;
  -o-transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out;
  -webkit-transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out;
  transition: transform 0.6s ease-in-out, opacity 1.78s ease-in-out;
}
.item.row4-col17 {
  transform: rotateX(16deg) rotateY(-24deg) rotateZ(1deg);
  -moz-transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out;
  -o-transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out;
  -webkit-transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out;
  transition: transform 0.18s ease-in-out, opacity 1.37s ease-in-out;
}
.item.row4-col18 {
  transform: rotateX(23deg) rotateY(24deg) rotateZ(2deg);
  -moz-transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out;
  -o-transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out;
  -webkit-transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out;
  transition: transform 0.42s ease-in-out, opacity 2.29s ease-in-out;
}
.item.row5-col1 {
  transform: rotateX(11deg) rotateY(-4deg) rotateZ(2deg);
  -moz-transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out;
  -o-transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out;
  -webkit-transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out;
  transition: transform 0.85s ease-in-out, opacity 1.09s ease-in-out;
}
.item.row5-col2 {
  transform: rotateX(-15deg) rotateY(-17deg) rotateZ(4deg);
  -moz-transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out;
  -o-transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out;
  -webkit-transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out;
  transition: transform 0.84s ease-in-out, opacity 0.28s ease-in-out;
}
.item.row5-col3 {
  transform: rotateX(-22deg) rotateY(7deg) rotateZ(2deg);
  -moz-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
  -o-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
  -webkit-transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
  transition: transform 0.14s ease-in-out, opacity 1.31s ease-in-out;
}
.item.row5-col4 {
  transform: rotateX(-14deg) rotateY(-16deg) rotateZ(0deg);
  -moz-transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out;
  -o-transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out;
  -webkit-transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out;
  transition: transform 0.98s ease-in-out, opacity 2.17s ease-in-out;
}
.item.row5-col5 {
  transform: rotateX(10deg) rotateY(23deg) rotateZ(1deg);
  -moz-transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out;
  -o-transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out;
  -webkit-transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out;
  transition: transform 0.29s ease-in-out, opacity 0.98s ease-in-out;
}
.item.row5-col6 {
  transform: rotateX(23deg) rotateY(-16deg) rotateZ(1deg);
  -moz-transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out;
  -o-transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out;
  -webkit-transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out;
  transition: transform 0.23s ease-in-out, opacity 0.49s ease-in-out;
}
.item.row5-col7 {
  transform: rotateX(-1deg) rotateY(2deg) rotateZ(-3deg);
  -moz-transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out;
  -o-transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out;
  -webkit-transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out;
  transition: transform 0.82s ease-in-out, opacity 1.59s ease-in-out;
}
.item.row5-col8 {
  transform: rotateX(-4deg) rotateY(-9deg) rotateZ(0deg);
  -moz-transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out;
  -o-transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out;
  -webkit-transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out;
  transition: transform 0.01s ease-in-out, opacity 1.14s ease-in-out;
}
.item.row5-col9 {
  transform: rotateX(-7deg) rotateY(2deg) rotateZ(-3deg);
  -moz-transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out;
  -o-transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out;
  -webkit-transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out;
  transition: transform 0.12s ease-in-out, opacity 1.19s ease-in-out;
}
.item.row5-col10 {
  transform: rotateX(7deg) rotateY(23deg) rotateZ(-1deg);
  -moz-transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out;
  -o-transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out;
  -webkit-transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out;
  transition: transform 0.67s ease-in-out, opacity 1.31s ease-in-out;
}
.item.row5-col11 {
  transform: rotateX(15deg) rotateY(-19deg) rotateZ(-3deg);
  -moz-transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out;
  -o-transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out;
  -webkit-transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out;
  transition: transform 0.32s ease-in-out, opacity 0.73s ease-in-out;
}
.item.row5-col12 {
  transform: rotateX(-20deg) rotateY(9deg) rotateZ(3deg);
  -moz-transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out;
  -o-transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out;
  -webkit-transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out;
  transition: transform 0.66s ease-in-out, opacity 1.88s ease-in-out;
}
.item.row5-col13 {
  transform: rotateX(-24deg) rotateY(-11deg) rotateZ(3deg);
  -moz-transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out;
  -o-transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out;
  -webkit-transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out;
  transition: transform 0.18s ease-in-out, opacity 1.36s ease-in-out;
}
.item.row5-col14 {
  transform: rotateX(24deg) rotateY(-3deg) rotateZ(-1deg);
  -moz-transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out;
  -o-transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out;
  -webkit-transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out;
  transition: transform 0.64s ease-in-out, opacity 2.33s ease-in-out;
}
.item.row5-col15 {
  transform: rotateX(-20deg) rotateY(3deg) rotateZ(3deg);
  -moz-transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out;
  -o-transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out;
  -webkit-transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out;
  transition: transform 0.53s ease-in-out, opacity 0.53s ease-in-out;
}
.item.row5-col16 {
  transform: rotateX(8deg) rotateY(3deg) rotateZ(0deg);
  -moz-transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out;
  -o-transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out;
  -webkit-transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out;
  transition: transform 0.22s ease-in-out, opacity 1.92s ease-in-out;
}
.item.row5-col17 {
  transform: rotateX(-11deg) rotateY(-13deg) rotateZ(-1deg);
  -moz-transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out;
  -o-transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out;
  -webkit-transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out;
  transition: transform 0.4s ease-in-out, opacity 0.19s ease-in-out;
}
.item.row5-col18 {
  transform: rotateX(-24deg) rotateY(22deg) rotateZ(-2deg);
  -moz-transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out;
  -o-transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out;
  -webkit-transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out;
  transition: transform 0.1s ease-in-out, opacity 1.76s ease-in-out;
}
.item.row6-col1 {
  transform: rotateX(-8deg) rotateY(11deg) rotateZ(-2deg);
  -moz-transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out;
  -o-transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out;
  -webkit-transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out;
  transition: transform 0.15s ease-in-out, opacity 1.3s ease-in-out;
}
.item.row6-col2 {
  transform: rotateX(0deg) rotateY(-24deg) rotateZ(4deg);
  -moz-transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out;
  -o-transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out;
  -webkit-transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out;
  transition: transform 0.79s ease-in-out, opacity 1.92s ease-in-out;
}
.item.row6-col3 {
  transform: rotateX(23deg) rotateY(0deg) rotateZ(-2deg);
  -moz-transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out;
  -o-transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out;
  -webkit-transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out;
  transition: transform 0.87s ease-in-out, opacity 1.83s ease-in-out;
}
.item.row6-col4 {
  transform: rotateX(17deg) rotateY(-6deg) rotateZ(-1deg);
  -moz-transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out;
  -o-transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out;
  -webkit-transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out;
  transition: transform 0.93s ease-in-out, opacity 0.99s ease-in-out;
}
.item.row6-col5 {
  transform: rotateX(-18deg) rotateY(-12deg) rotateZ(4deg);
  -moz-transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out;
  -o-transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out;
  -webkit-transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out;
  transition: transform 0.06s ease-in-out, opacity 2.22s ease-in-out;
}
.item.row6-col6 {
  transform: rotateX(-15deg) rotateY(-16deg) rotateZ(2deg);
  -moz-transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out;
  -o-transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out;
  -webkit-transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out;
  transition: transform 0.99s ease-in-out, opacity 0.22s ease-in-out;
}
.item.row6-col7 {
  transform: rotateX(3deg) rotateY(3deg) rotateZ(2deg);
  -moz-transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out;
  -o-transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out;
  -webkit-transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out;
  transition: transform 0.67s ease-in-out, opacity 0.27s ease-in-out;
}
.item.row6-col8 {
  transform: rotateX(20deg) rotateY(8deg) rotateZ(-3deg);
  -moz-transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out;
  -o-transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out;
  -webkit-transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out;
  transition: transform 0.03s ease-in-out, opacity 0.06s ease-in-out;
}
.item.row6-col9 {
  transform: rotateX(18deg) rotateY(9deg) rotateZ(-2deg);
  -moz-transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out;
  -o-transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out;
  -webkit-transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out;
  transition: transform 0.44s ease-in-out, opacity 0.53s ease-in-out;
}
.item.row6-col10 {
  transform: rotateX(-17deg) rotateY(15deg) rotateZ(-2deg);
  -moz-transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out;
  -o-transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out;
  -webkit-transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out;
  transition: transform 0.23s ease-in-out, opacity 1.07s ease-in-out;
}
.item.row6-col11 {
  transform: rotateX(-23deg) rotateY(-12deg) rotateZ(2deg);
  -moz-transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out;
  -o-transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out;
  -webkit-transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out;
  transition: transform 0.6s ease-in-out, opacity 2.28s ease-in-out;
}
.item.row6-col12 {
  transform: rotateX(-10deg) rotateY(1deg) rotateZ(-2deg);
  -moz-transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out;
  -o-transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out;
  -webkit-transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out;
  transition: transform 0.43s ease-in-out, opacity 0.07s ease-in-out;
}
.item.row6-col13 {
  transform: rotateX(19deg) rotateY(7deg) rotateZ(-3deg);
  -moz-transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out;
  -o-transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out;
  -webkit-transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out;
  transition: transform 0.18s ease-in-out, opacity 1.69s ease-in-out;
}
.item.row6-col14 {
  transform: rotateX(17deg) rotateY(-19deg) rotateZ(0deg);
  -moz-transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out;
  -o-transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out;
  -webkit-transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out;
  transition: transform 0.74s ease-in-out, opacity 1.84s ease-in-out;
}
.item.row6-col15 {
  transform: rotateX(6deg) rotateY(-3deg) rotateZ(0deg);
  -moz-transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out;
  -o-transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out;
  -webkit-transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out;
  transition: transform 0.63s ease-in-out, opacity 0.79s ease-in-out;
}
.item.row6-col16 {
  transform: rotateX(4deg) rotateY(-3deg) rotateZ(1deg);
  -moz-transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out;
  -o-transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out;
  -webkit-transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out;
  transition: transform 0.23s ease-in-out, opacity 1.93s ease-in-out;
}
.item.row6-col17 {
  transform: rotateX(-24deg) rotateY(5deg) rotateZ(3deg);
  -moz-transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out;
  -o-transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out;
  -webkit-transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out;
  transition: transform 0.43s ease-in-out, opacity 0.93s ease-in-out;
}
.item.row6-col18 {
  transform: rotateX(-8deg) rotateY(-4deg) rotateZ(2deg);
  -moz-transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out;
  -o-transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out;
  -webkit-transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out;
  transition: transform 0.13s ease-in-out, opacity 2.26s ease-in-out;
}

.msg {
  position: absolute;
  color: white;
  top: 15%;
  text-align: center;
  width: 100%;
  z-index: 111;
  width: 500px;
  left: 50%;
  margin-left: -250px;
  font-weight: 500;
  font-size: 38px;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  z-index: 3;
}

.credits {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2px 15px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  z-index: 3;
}
.credits a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}          
            var win_width,
	win_height;
win_width = $(window).width();
win_height = $(window).height();

$('.main').css({
	'background-size': win_width + 'px ' + 'auto'
})

$('.item').css({
	'background-size': win_width + 'px ' + 'auto'
})

$('.row').each(function() {
	var pos,
		item_index,
		pos_y,
		total_rows;

	total_rows = $('.row').length;
	item_row_index = $(this).index('.row');
	pos_y = -win_height / total_rows * item_row_index + 'px';


	$(this).css({
		'top': 100 / total_rows * item_row_index + '%',
		'height': 100 / total_rows + '%'
	})
	var total_items = $(this).find('.item').length;

	$(this).find('.item').each(function() {
		var pos_x;
		var item_index = $(this).index('.item');
		pos_x = -win_width / total_items * item_index + 'px';
		$(this).css({
			'background-position': pos_x + ' ' + pos_y,
			'left': 100 / total_items * (item_index - total_items * item_row_index ) + '%',
			'width': 100 / total_items + '%',
		})
	})

})          
Description
Recent comments

Latest Comments section by users

Loading…