.cards {
    background-color: orange;
    width:200px;
    height:150px;
    padding:1em;
}

.translate {
    transform:translateX(600px);
}
.scale {
    transform:scale(0.5) translateX(700px);
}
.rotate {
    transform-origin:center center;
    transform:translateX(500px) rotate(45deg);
}
.skew {
    transform:skew(15deg, 0deg) translateX(400px);
}
.multiple {
    transform-origin:center center;
    transform:translateX(400px) scale(0.5) rotate(45deg) ;
}

.transition {
    transform:translateX(400px);
    transition:all 1s;
}
.transition:hover {
    transform:scale(1.5) translateX(300px);
    background-color:#2ADF92;
}

.button{
    border:none;
    background-color: red;
    padding:1em 1.5em;
    border-radius:5px;
    color:white;
}
.animation {
    transform:translateX(400px);
    transition:all 1s;
}
.button:active ~ .animation {
    transform-origin:center center;
    transform:translateX(350px) scale(1.5) rotate(45deg);
}



/*.button:active .animation {
    transform-origin:center center;
    transform:translateX(300px) scale(1.5) rotate(45deg) ;
    transition:ease 0.25s;
}*/
/*.anim:active {
    transform-origin:center center;
    transform:scale(1.5) rotate(45deg);
    transition:ease 0.25s;
}*/