QE1(64070227) (Copy 11746)

✨ PHURI SIRIPOOL

<!DOCTYPE html>
<html>
  <head>
    <title>Photo cube</title>
  </head>
  <body>
    <div id='stars2'></div>
    <div class="zen">
    </div>
    <div id="perspective">
    <div class="die">
        <div class="face face-1">
          <img src="https://cdn.discordapp.com/attachments/938456699885473803/938457177855778886/received_265435865656292.jpeg">
        </div>
        <div class="face face-2">
          <img src="https://cdn.discordapp.com/attachments/938456699885473803/938457178128400384/received_1537902753251832.jpeg">
        </div>
        <div class="face face-3">
          <img src="https://cdn.discordapp.com/attachments/938456699885473803/938457178656878662/IMG_0357.jpg">
        </div>
        <div class="face face-4">
          <img src="https://cdn.discordapp.com/attachments/938456699885473803/938457179206340658/1639444796774.jpg">
        </div>
        <div class="face face-5">
          <img src="https://cdn.discordapp.com/attachments/938456699885473803/938457179537694782/received_630377064823718.jpeg">
        </div>
        <div class="face face-6">
          <img src="https://cdn.discordapp.com/attachments/938456699885473803/938457179827105792/1636474286573.jpg">
        </div>
    </div>
</div>
  </body>
</html>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Quintessential&display=swap');
      @keyframes flip{
    from {
		transform:rotateY(0deg);	
      }
    to {
		transform:rotateY(360deg)	
      }
    }
  body{
	  background:#000;
     --face-size: 250px;
     justify-content: center;
  }
        .zen:after{
  		  display: flex;
  		  color:#FFF;
  		  justify-content: center;
  		  font-size: 3.5rem;
  		  margin-top:0;
  		  content: 'Zen';
        font-family: 'Quintessential', cursive;
        animation:flip 2s infinite linear;
		}

.zen:hover:after{
  		  content:'Woralop Dokkham 64070227';
  		  text-align: center;
        margin:auto;
		}
  
  	@keyframes animStar {
    from {
        transform: translateY(0px);
    }

to {
        transform: translateY(-1800px);
    }
}
  @keyframes spin {
      from {
        transform: rotateX(0deg) rotateY(0deg);
    			}  
    	to {
        transform: rotateX(360deg) rotateY(720deg);
    			}
		}
  @keyframes pic {
    from {
		transform: scale(0.5);
    		}
    to {
		transform: scale(1);
    	 }
  }
  
#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1907px 1575px #FFF, 893px 268px #FFF, 1819px 666px #FFF, 366px 1985px #FFF, 1736px 1062px #FFF, 1124px 45px #FFF, 905px 1674px #FFF, 1570px 711px #FFF, 255px 1747px #FFF, 147px 1032px #FFF, 865px 1813px #FFF, 1721px 1461px #FFF, 202px 724px #FFF, 1860px 812px #FFF, 634px 1410px #FFF, 927px 1264px #FFF, 1648px 620px #FFF, 1915px 1309px #FFF, 731px 778px #FFF, 91px 1185px #FFF, 829px 1003px #FFF, 174px 1784px #FFF, 1094px 1874px #FFF, 1464px 484px #FFF, 1639px 1717px #FFF, 959px 573px #FFF, 1686px 1287px #FFF, 906px 356px #FFF, 970px 499px #FFF, 626px 890px #FFF, 1344px 1070px #FFF, 1351px 544px #FFF, 708px 68px #FFF, 1870px 130px #FFF, 556px 1270px #FFF, 1432px 618px #FFF, 769px 673px #FFF, 1289px 1410px #FFF, 1499px 1969px #FFF, 749px 1163px #FFF, 1198px 198px #FFF, 399px 133px #FFF, 1856px 1280px #FFF, 904px 194px #FFF, 973px 1107px #FFF, 1371px 1785px #FFF, 989px 1835px #FFF, 1043px 1517px #FFF, 787px 916px #FFF, 1635px 1155px #FFF, 752px 524px #FFF, 1926px 1279px #FFF, 1052px 1163px #FFF, 719px 1963px #FFF, 786px 519px #FFF, 1440px 500px #FFF, 156px 1265px #FFF, 1691px 429px #FFF, 1349px 1474px #FFF, 736px 459px #FFF, 248px 1678px #FFF, 1136px 510px #FFF, 1317px 10px #FFF, 1209px 1323px #FFF, 54px 469px #FFF, 730px 1939px #FFF, 960px 23px #FFF, 112px 941px #FFF, 1852px 1522px #FFF, 1993px 1972px #FFF, 265px 129px #FFF, 222px 1897px #FFF, 1766px 1804px #FFF, 1530px 1786px #FFF, 1045px 432px #FFF, 1916px 1980px #FFF, 309px 1780px #FFF, 1420px 559px #FFF, 1708px 103px #FFF, 324px 1407px #FFF, 1175px 943px #FFF, 80px 1221px #FFF, 1016px 1933px #FFF, 318px 560px #FFF, 190px 1489px #FFF, 1095px 892px #FFF, 1975px 1191px #FFF, 1197px 955px #FFF, 1482px 873px #FFF, 1912px 300px #FFF, 2000px 1636px #FFF, 1473px 1808px #FFF, 507px 192px #FFF, 924px 1300px #FFF, 1485px 1636px #FFF, 41px 1822px #FFF, 689px 120px #FFF, 769px 273px #FFF, 1039px 976px #FFF, 1057px 1520px #FFF, 1417px 1187px #FFF, 512px 1507px #FFF, 519px 45px #FFF, 1207px 1687px #FFF, 1824px 1488px #FFF, 1694px 31px #FFF, 1859px 52px #FFF, 1368px 268px #FFF, 190px 1404px #FFF, 940px 1003px #FFF, 167px 942px #FFF, 1641px 647px #FFF, 1051px 654px #FFF, 233px 1640px #FFF, 554px 511px #FFF, 1705px 1866px #FFF, 240px 1430px #FFF, 140px 668px #FFF, 648px 1617px #FFF, 252px 101px #FFF, 676px 1774px #FFF, 889px 1698px #FFF, 595px 853px #FFF, 249px 1768px #FFF, 1091px 1529px #FFF, 223px 839px #FFF, 239px 699px #FFF, 1547px 356px #FFF, 249px 1130px #FFF, 1209px 1946px #FFF, 1967px 1274px #FFF, 430px 298px #FFF, 1305px 134px #FFF, 156px 91px #FFF, 1712px 264px #FFF, 1256px 991px #FFF, 1887px 1844px #FFF, 1957px 1275px #FFF, 1718px 666px #FFF, 1090px 543px #FFF, 933px 1411px #FFF, 801px 323px #FFF, 202px 1659px #FFF, 1117px 549px #FFF, 290px 1859px #FFF, 1380px 1516px #FFF, 557px 1165px #FFF, 1953px 1758px #FFF, 1901px 1407px #FFF, 1144px 347px #FFF, 1640px 271px #FFF, 1996px 43px #FFF, 838px 488px #FFF, 1151px 1529px #FFF, 306px 460px #FFF, 1666px 635px #FFF, 1572px 633px #FFF, 1797px 1076px #FFF, 1727px 1119px #FFF, 474px 871px #FFF, 1491px 1398px #FFF, 1301px 868px #FFF, 1632px 454px #FFF, 1611px 466px #FFF, 498px 1162px #FFF, 796px 269px #FFF, 1988px 747px #FFF, 502px 12px #FFF, 276px 1260px #FFF, 1536px 974px #FFF, 956px 656px #FFF, 107px 701px #FFF, 965px 491px #FFF, 1646px 247px #FFF, 1515px 921px #FFF, 1813px 519px #FFF, 697px 143px #FFF, 591px 1452px #FFF, 1773px 1411px #FFF, 1622px 1401px #FFF, 534px 340px #FFF, 1590px 284px #FFF, 1464px 528px #FFF, 734px 1718px #FFF, 1929px 1683px #FFF, 656px 480px #FFF, 833px 705px #FFF, 1567px 109px #FFF, 1055px 330px #FFF, 1943px 1367px #FFF, 1935px 1512px #FFF, 355px 1024px #FFF, 1894px 218px #FFF, 1703px 1772px #FFF, 781px 1394px #FFF, 367px 42px #FFF, 100px 690px #FFF, 1831px 458px #FFF, 1884px 1878px #FFF, 814px 1013px #FFF;
    animation: animStar 10s linear infinite;
}

#stars2:after {
    content: "";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1907px 1575px #FFF, 893px 268px #FFF, 1819px 666px #FFF, 366px 1985px #FFF, 1736px 1062px #FFF, 1124px 45px #FFF, 905px 1674px #FFF, 1570px 711px #FFF, 255px 1747px #FFF, 147px 1032px #FFF, 865px 1813px #FFF, 1721px 1461px #FFF, 202px 724px #FFF, 1860px 812px #FFF, 634px 1410px #FFF, 927px 1264px #FFF, 1648px 620px #FFF, 1915px 1309px #FFF, 731px 778px #FFF, 91px 1185px #FFF, 829px 1003px #FFF, 174px 1784px #FFF, 1094px 1874px #FFF, 1464px 484px #FFF, 1639px 1717px #FFF, 959px 573px #FFF, 1686px 1287px #FFF, 906px 356px #FFF, 970px 499px #FFF, 626px 890px #FFF, 1344px 1070px #FFF, 1351px 544px #FFF, 708px 68px #FFF, 1870px 130px #FFF, 556px 1270px #FFF, 1432px 618px #FFF, 769px 673px #FFF, 1289px 1410px #FFF, 1499px 1969px #FFF, 749px 1163px #FFF, 1198px 198px #FFF, 399px 133px #FFF, 1856px 1280px #FFF, 904px 194px #FFF, 973px 1107px #FFF, 1371px 1785px #FFF, 989px 1835px #FFF, 1043px 1517px #FFF, 787px 916px #FFF, 1635px 1155px #FFF, 752px 524px #FFF, 1926px 1279px #FFF, 1052px 1163px #FFF, 719px 1963px #FFF, 786px 519px #FFF, 1440px 500px #FFF, 156px 1265px #FFF, 1691px 429px #FFF, 1349px 1474px #FFF, 736px 459px #FFF, 248px 1678px #FFF, 1136px 510px #FFF, 1317px 10px #FFF, 1209px 1323px #FFF, 54px 469px #FFF, 730px 1939px #FFF, 960px 23px #FFF, 112px 941px #FFF, 1852px 1522px #FFF, 1993px 1972px #FFF, 265px 129px #FFF, 222px 1897px #FFF, 1766px 1804px #FFF, 1530px 1786px #FFF, 1045px 432px #FFF, 1916px 1980px #FFF, 309px 1780px #FFF, 1420px 559px #FFF, 1708px 103px #FFF, 324px 1407px #FFF, 1175px 943px #FFF, 80px 1221px #FFF, 1016px 1933px #FFF, 318px 560px #FFF, 190px 1489px #FFF, 1095px 892px #FFF, 1975px 1191px #FFF, 1197px 955px #FFF, 1482px 873px #FFF, 1912px 300px #FFF, 2000px 1636px #FFF, 1473px 1808px #FFF, 507px 192px #FFF, 924px 1300px #FFF, 1485px 1636px #FFF, 41px 1822px #FFF, 689px 120px #FFF, 769px 273px #FFF, 1039px 976px #FFF, 1057px 1520px #FFF, 1417px 1187px #FFF, 512px 1507px #FFF, 519px 45px #FFF, 1207px 1687px #FFF, 1824px 1488px #FFF, 1694px 31px #FFF, 1859px 52px #FFF, 1368px 268px #FFF, 190px 1404px #FFF, 940px 1003px #FFF, 167px 942px #FFF, 1641px 647px #FFF, 1051px 654px #FFF, 233px 1640px #FFF, 554px 511px #FFF, 1705px 1866px #FFF, 240px 1430px #FFF, 140px 668px #FFF, 648px 1617px #FFF, 252px 101px #FFF, 676px 1774px #FFF, 889px 1698px #FFF, 595px 853px #FFF, 249px 1768px #FFF, 1091px 1529px #FFF, 223px 839px #FFF, 239px 699px #FFF, 1547px 356px #FFF, 249px 1130px #FFF, 1209px 1946px #FFF, 1967px 1274px #FFF, 430px 298px #FFF, 1305px 134px #FFF, 156px 91px #FFF, 1712px 264px #FFF, 1256px 991px #FFF, 1887px 1844px #FFF, 1957px 1275px #FFF, 1718px 666px #FFF, 1090px 543px #FFF, 933px 1411px #FFF, 801px 323px #FFF, 202px 1659px #FFF, 1117px 549px #FFF, 290px 1859px #FFF, 1380px 1516px #FFF, 557px 1165px #FFF, 1953px 1758px #FFF, 1901px 1407px #FFF, 1144px 347px #FFF, 1640px 271px #FFF, 1996px 43px #FFF, 838px 488px #FFF, 1151px 1529px #FFF, 306px 460px #FFF, 1666px 635px #FFF, 1572px 633px #FFF, 1797px 1076px #FFF, 1727px 1119px #FFF, 474px 871px #FFF, 1491px 1398px #FFF, 1301px 868px #FFF, 1632px 454px #FFF, 1611px 466px #FFF, 498px 1162px #FFF, 796px 269px #FFF, 1988px 747px #FFF, 502px 12px #FFF, 276px 1260px #FFF, 1536px 974px #FFF, 956px 656px #FFF, 107px 701px #FFF, 965px 491px #FFF, 1646px 247px #FFF, 1515px 921px #FFF, 1813px 519px #FFF, 697px 143px #FFF, 591px 1452px #FFF, 1773px 1411px #FFF, 1622px 1401px #FFF, 534px 340px #FFF, 1590px 284px #FFF, 1464px 528px #FFF, 734px 1718px #FFF, 1929px 1683px #FFF, 656px 480px #FFF, 833px 705px #FFF, 1567px 109px #FFF, 1055px 330px #FFF, 1943px 1367px #FFF, 1935px 1512px #FFF, 355px 1024px #FFF, 1894px 218px #FFF, 1703px 1772px #FFF, 781px 1394px #FFF, 367px 42px #FFF, 100px 690px #FFF, 1831px 458px #FFF, 1884px 1878px #FFF, 814px 1013px #FFF;
}
  
  .die {
        display: flex;
    	  flex-wrap: wrap;
    	  justify-content: center;
    	  margin: 0 auto;
        margin-top:13em;
    	  width: var(--face-size);
        height: var(--face-size);
        transform-style: preserve-3d;
        animation: spin 10s linear 1s infinite alternate;
}
  		.die:hover{
		animation-play-state: paused;
  		}
  		.face {
    position: absolute;
    width: var(--face-size);
    height: var(--face-size);
    border: 3px solid black;  
    transform-style: preserve-3d;
    border-radius:30px;
		}

.face-1 {
    transform: translateZ(calc(var(--face-size) / -2)) rotateY(180deg);
		}
		.face-2 {
    transform: translateX(50%) rotateY(90deg);
		}
		.face-3 {
    transform: translateX(-50%) rotateY(-90deg);
		}
		.face-4 {
    transform: translateY(50%) rotateX(90deg);
		}
		.face-5 {
    transform: translateY(-50%) rotateX(-90deg);
		}
		.face-6 {
    transform: translateZ(calc(var(--face-size) / 2));
		}
  		img{
	width: 100%;
   height: 100%;
   animation:pic 4s infinite alternate;
   border-radius:30px;
  		}

</style>