article{
    background-color:white;
}
.cetexo {
    background-color:#ffe436;
    padding:1em;
    width:23%;
    line-height:1.5em;
    margin:4em auto;
}
.translate {
    transform-origin: 50% 50%;
    transform: translatex(10em);
}
.scale{
    transform-origin: 50% 50%;
    transform: scale(0.5);
}
.rotate {
    transform-origin: 50% 50%;
    transform: rotate(45deg);
}
.skew {
    transform-origin: 50% 50%;
    transform: skew(15deg);
}
.multiple {
    transform-origin: 50% 50%;
    transform: translatex(10em) scale(0.5) rotate(45deg);
}

.transition {
    transition-duration: 1s;
}
.transition:hover {
    background-color:lightblue;
    cursor:pointer;
    transform:scale(2);
}

@keyframes newspaper {
    from {
        transform:scale(0) rotate(720deg);
        
    }
    to {
        transform:scale(1) rotate(0);
        
    }
}

.anim {
    background-color:lightgreen;
    animation:newspaper 1s;
}

/************CERCLES**************/
.cercles {
    border-radius:50%;
    width:40px;
    height:40px;
    position:absolute;
}
#rouge {
    border:1px solid red;
}
#yellow {
    border:1px solid yellow;
}
#blue {
    border:1px solid blue;
}