body{
    margin: 0;
    padding: 0;
    background: #3a3a3a;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: floating 2s linear infinite;

}
.left{
    position: absolute;
    top: 20%;
    left: 20%;
    transform: translate(-50%,-50%);
    animation: floating 2s linear infinite;

}
.left1{
    position: absolute;
    top: 80%;
    left: 20%;
    transform: translate(-50%,-50%);
    animation: floating 2s linear infinite;

}
.right{
    position: absolute;
    top: 20%;
    right:  5%;
    transform: translate(-50%,-50%);
    animation: floating 2s linear infinite;

}
.right1{
    position: absolute;
    top: 80%;
    right:  5%;
    transform: translate(-50%,-50%);
    animation: floating 2s linear infinite;

}
.box1{
    background: #df40ff;
    color: #d62121;
    padding: 10px;
    text-transform: uppercase;
    font-family: verdana;
    font-size: 3em;
    transform-style: preserve-3d;
    transform-origin: left;
    transform: perspective(1000px) rotateY(25deg)translate(40px,5px);

}
.box1:before{
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width:50px;
    height:100% ;
    background: palevioletred;
    transform-style: preserve-3d;
    transform-origin: right;
    transform: perspective(1000px)rotateY(-80deg); 
}
.box2{
    background: #5766bd;
    color: #aa4343;
    padding: 10px;
    text-transform: uppercase;
    font-family: verdana;
    font-size: 3em;
    transform-style: preserve-3d;
    transform-origin: left;
    transform: perspective(1000px) rotateY(-25deg);

}
.box2:before{
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width:50px;
    height:100% ;
    background: #358635;
    transform-style: preserve-3d;
    transform-origin: right;
    transform: perspective(1000px)rotateY(-25deg);
}
.box2:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100px;
    border-radius: 50%;
    background:rgb(53, 42, 22);
   
    transform-style: preserve-3d;
    transform-origin: right;
    transform: perspective(1000px)rotateX(75deg);
}
@keyframes floating {
    0%{
        transform: translate(-50%,-50%);
    }
    50%{
        transform: translate(-50%,-30%);
    }
    100%{
        transform: translate(-50%,-50%);
    }
    
}