body{
     height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style:preserve-3d ;
    perspective: 10000px;
 background-image: linear-gradient(135deg, white,grey ,rgba(0, 0, 0, 0.83),whitesmoke ,rgba(0, 0, 0, 0.342) ,gray,grey ,rgba(0, 0, 0, 0.83),rgba(0, 0, 0, 0.342),black)
 }
 /* //////////////////////// */
 .basic{
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 10000px;
    transform-style:preserve-3d ;
    width: 300px;
    height: 300px;
    transform: rotateX(20deg)rotateY(30deg) rotateZ(10deg);
     transition: all 2s  ease-in-out;
     background: transparent;

 }
 /* //////////////////////// */
 .a{
      cursor:pointer;

    position: absolute;
    width: 100%;
    display: inline-block;
    height: 100%;
    position: absolute;
    opacity: 0.8;
    border:10px #6c3483 solid;
       perspective: 800px;

 }
/* //////////////////////// */
 i{
  font-size: 400%;
  color: white;
  z-index: 999999;
  position: relative;
  transition:all 2s ease-in-out ;
 
}

.i2{right: 60px; 
 }
 

.a:hover{
    border: 8px rgb(0, 128, 255) solid;
    background-image: none;
    background-color: #27ae60;
     
}
/* //////////////////////// */
.one{
 transform: translateX(5px)   translateZ(150px);
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: larger;
 font-weight: bold;
 z-index: 6666333;
 
     background-image: linear-gradient(145deg,)pink,rgba(255, 192, 203, 0.703),rgba(255, 192, 203, 0.555);

 }
.two{
  transform: translateX(5px)   translateZ(-150px);
   background-image: linear-gradient(145deg,orange,rgba(255, 166, 0, 0.807),rgba(255, 166, 0, 0.725));

  display: flex;
 justify-content: center;
 align-items: center;
 font-size: larger;
 font-weight: bold;
 
 }.three {
      background-image: linear-gradient(145deg, black,rgba(0, 0, 0, 0.789),rgba(0, 0, 0, 0.581));

  transform: rotateY(90.5deg);
right: 150px;
}.four{
transform: rotateY(90deg);
left: 150px;
z-index: 9;
     background-image: linear-gradient(145deg ,yellow,rgba(255, 255, 0, 0.668),rgba(255, 255, 0, 0.57));

 }.five{
       background-image: linear-gradient(145deg,red,rgba(255, 0, 0, 0.763),rgba(255, 0, 0, 0.571));

 transform: translateY(-155px) rotateX(87deg); 
}.six{
     background-image: linear-gradient(145deg,blue,rgba(0, 0, 255, 0.741),rgba(0, 0, 255, 0.418));
 
transform: translateY(155px) rotateX(90deg); 
 }