Tile flipper animation

by Mayank Dixit

HTML

<div id='note'>Tiles: coming from <b>anywhere</b> of the page.</div>
<div id="tiles"></div>

CSS

body {
  margin: 0;
}
.box {
    line-height: 20px;
    text-align: center;
    border: 2px solid white;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100px;
    overflow: auto;
    line-height: 19px;
    position: absolute;
    -webkit-transition: .4s;
    opacity: 0;
}
#note {
  position: fixed;
  z-index: 9;
  background: rgb(249, 249, 115);
  padding: 10px;
  margin: 6px;
  left: calc(50% - 158px);
  border-radius: 5px;
  box-shadow: 0 0 10px gray;
  border: 1px solid rgb(190, 190, 75);
  bottom: 10px;
  display: none;
}

JavaScript

var json = [{
    "type": 0,
        "name": "World",
        "dname": "World",
        "$$hashKey": "object:4"
}, {
    "type": 0,
        "name": "India",
        "dname": "India",
        "$$hashKey": "object:5"
}, {
    "dname": "Kutte Hai Sare K Sare... Jail Mein Daal Do.",
        "owner": "mayank2",
        "type": 1,
        "name": "kuttehaisa",
        "p": null,
        "$$hashKey": "object:6"
}, {
    "dname": "Udhari Chuka De Gareeb :Sale",
        "owner": "mayank2",
        "type": 1,
        "name": "udharichuk",
        "p": null,
        "$$hashKey": "object:7"
}, {
    "dname": "Chal Chaay Peeke Aate Hai... Bc Koi Mila Ni Marne Ko Subeh Se.",
        "owner": "mayank2",
        "type": 1,
        "name": "chalchaayp",
        "p": null,
        "$$hashKey": "object:8"
}, {
    "dname": "Faltu ki baat na kr yaar,m main vese hi kt rha hu..",
        "owner": "mayank2",
        "type": 1,
        "name": "faltukibaa",
        "p": null,
        "$$hashKey": "object:9"
}, {
    "dname": "coool is just not enough for humans. They must refrigerate oneself to make one cooler.",
        "owner": "mayank2",
        "type": 1,
        "name": "cooolisjus",
        "p": null,
        "$$hashKey": "object:10"
}, {
    "dname": "Spammers are hero. They must be buried on moon :)",
        "owner": "mayank2",
        "type": 1,
        "name": "spammersar",
        "p": null,
        "$$hashKey": "object:11"
}, {
    "dname": ":D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :",
        "owner": "mayank2",
        "type": 1,
        "name": "dddddddddd",
        "p": null,
        "$$hashKey": "object:12"
}, {
    "dname": "na koi hai na koitha. fuddu khi ka :D",
        "owner": "mayank2",
        "type": 1,
        "name": "nakoihaina",
        "p": null,
        "$$hashKey": "object:13"
}, {
    "dname": "Supergirk Ki Movie Dekhi???",
        "owner": "mayank2",
        "type": 1,
        "name":...