.master_cylinder {
    display: flex;
    justify-content: center;
    perspective: 1000px;
    margin-top: 50px;
    opacity: 0.4;
}
.container_cylinder {
    transform-style: preserve-3d;
    animation: coin-3d-rotate 8s linear infinite;
}
@keyframes coin-3d-rotate {
    0% { transform: rotateY(0deg) rotateX(15deg) scale(1); }
    25% { transform: rotateY(90deg) rotateX(15deg) scale(0.8); }
    50% { transform: rotateY(180deg) rotateX(15deg) scale(0.6); }
    75% { transform: rotateY(270deg) rotateX(15deg) scale(0.8); }
    100% { transform: rotateY(360deg) rotateX(15deg) scale(1); }
}
.cylinder {
    position: relative;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
}
.cylinder-face {
    position: absolute;
    width: 44px;
    height: 18px;
    left: 229px;
    top: 242px;
    /* Effet de stries sur la tranche */
    background: linear-gradient(90deg, #d1c8ba 0%, #b7b0a4 5%, #4b4944 10%, #b7b0a4 11%, #d1c8ba 20%, #b7b0a4 25%, #4b4944 30%, #b7b0a4 31%, #d1c8ba 40%, #b7b0a4 45%, #4b4944 50%, #b7b0a4 51%, #d1c8ba 60%, #b7b0a4 65%, #4b4944 70%, #b7b0a4 71%, #d1c8ba 80%, #b7b0a4 85%, #4b4944 90%, #b7b0a4 91%, #d1c8ba 100% );
    background-size: 30px 100%;
    --translateZ: translateZ(250px);
    --rotateX: rotateX(90deg);
}
.cylinder-face:nth-child(1) { transform: var(--rotateX) rotateY(0deg) var(--translateZ); }
.cylinder-face:nth-child(2) { transform: var(--rotateX) rotateY(5deg) var(--translateZ); }
.cylinder-face:nth-child(3) { transform: var(--rotateX) rotateY(10deg) var(--translateZ); }
.cylinder-face:nth-child(4) { transform: var(--rotateX) rotateY(15deg) var(--translateZ); }
.cylinder-face:nth-child(5) { transform: var(--rotateX) rotateY(20deg) var(--translateZ); }
.cylinder-face:nth-child(6) { transform: var(--rotateX) rotateY(25deg) var(--translateZ); }
.cylinder-face:nth-child(7) { transform: var(--rotateX) rotateY(30deg) var(--translateZ); }
.cylinder-face:nth-child(8) { transform: var(--rotateX) rotateY(35deg) var(--translateZ); }
.cylinder-face:nth-child(9) { transform: var(--rotateX) rotateY(40deg) var(--translateZ); }
.cylinder-face:nth-child(10) { transform: var(--rotateX) rotateY(45deg) var(--translateZ); }
.cylinder-face:nth-child(11) { transform: var(--rotateX) rotateY(50deg) var(--translateZ); }
.cylinder-face:nth-child(12) { transform: var(--rotateX) rotateY(55deg) var(--translateZ); }
.cylinder-face:nth-child(13) { transform: var(--rotateX) rotateY(60deg) var(--translateZ); }
.cylinder-face:nth-child(14) { transform: var(--rotateX) rotateY(65deg) var(--translateZ); }
.cylinder-face:nth-child(15) { transform: var(--rotateX) rotateY(70deg) var(--translateZ); }
.cylinder-face:nth-child(16) { transform: var(--rotateX) rotateY(75deg) var(--translateZ); }
.cylinder-face:nth-child(17) { transform: var(--rotateX) rotateY(80deg) var(--translateZ); }
.cylinder-face:nth-child(18) { transform: var(--rotateX) rotateY(85deg) var(--translateZ); }
.cylinder-face:nth-child(19) { transform: var(--rotateX) rotateY(90deg) var(--translateZ); }
.cylinder-face:nth-child(20) { transform: var(--rotateX) rotateY(95deg) var(--translateZ); }
.cylinder-face:nth-child(21) { transform: var(--rotateX) rotateY(100deg) var(--translateZ); }
.cylinder-face:nth-child(22) { transform: var(--rotateX) rotateY(105deg) var(--translateZ); }
.cylinder-face:nth-child(23) { transform: var(--rotateX) rotateY(110deg) var(--translateZ); }
.cylinder-face:nth-child(24) { transform: var(--rotateX) rotateY(115deg) var(--translateZ); }
.cylinder-face:nth-child(25) { transform: var(--rotateX) rotateY(120deg) var(--translateZ); }
.cylinder-face:nth-child(26) { transform: var(--rotateX) rotateY(125deg) var(--translateZ); }
.cylinder-face:nth-child(27) { transform: var(--rotateX) rotateY(130deg) var(--translateZ); }
.cylinder-face:nth-child(28) { transform: var(--rotateX) rotateY(135deg) var(--translateZ); }
.cylinder-face:nth-child(29) { transform: var(--rotateX) rotateY(140deg) var(--translateZ); }
.cylinder-face:nth-child(30) { transform: var(--rotateX) rotateY(145deg) var(--translateZ); }
.cylinder-face:nth-child(31) { transform: var(--rotateX) rotateY(150deg) var(--translateZ); }
.cylinder-face:nth-child(32) { transform: var(--rotateX) rotateY(155deg) var(--translateZ); }
.cylinder-face:nth-child(33) { transform: var(--rotateX) rotateY(160deg) var(--translateZ); }
.cylinder-face:nth-child(34) { transform: var(--rotateX) rotateY(165deg) var(--translateZ); }
.cylinder-face:nth-child(35) { transform: var(--rotateX) rotateY(170deg) var(--translateZ); }
.cylinder-face:nth-child(36) { transform: var(--rotateX) rotateY(175deg) var(--translateZ); }
.cylinder-face:nth-child(37) { transform: var(--rotateX) rotateY(180deg) var(--translateZ); }
.cylinder-face:nth-child(38) { transform: var(--rotateX) rotateY(185deg) var(--translateZ); }
.cylinder-face:nth-child(39) { transform: var(--rotateX) rotateY(190deg) var(--translateZ); }
.cylinder-face:nth-child(40) { transform: var(--rotateX) rotateY(195deg) var(--translateZ); }
.cylinder-face:nth-child(41) { transform: var(--rotateX) rotateY(200deg) var(--translateZ); }
.cylinder-face:nth-child(42) { transform: var(--rotateX) rotateY(205deg) var(--translateZ); }
.cylinder-face:nth-child(43) { transform: var(--rotateX) rotateY(210deg) var(--translateZ); }
.cylinder-face:nth-child(44) { transform: var(--rotateX) rotateY(215deg) var(--translateZ); }
.cylinder-face:nth-child(45) { transform: var(--rotateX) rotateY(220deg) var(--translateZ); }
.cylinder-face:nth-child(46) { transform: var(--rotateX) rotateY(225deg) var(--translateZ); }
.cylinder-face:nth-child(47) { transform: var(--rotateX) rotateY(230deg) var(--translateZ); }
.cylinder-face:nth-child(48) { transform: var(--rotateX) rotateY(235deg) var(--translateZ); }
.cylinder-face:nth-child(49) { transform: var(--rotateX) rotateY(240deg) var(--translateZ); }
.cylinder-face:nth-child(50) { transform: var(--rotateX) rotateY(245deg) var(--translateZ); }
.cylinder-face:nth-child(51) { transform: var(--rotateX) rotateY(250deg) var(--translateZ); }
.cylinder-face:nth-child(52) { transform: var(--rotateX) rotateY(255deg) var(--translateZ); }
.cylinder-face:nth-child(53) { transform: var(--rotateX) rotateY(260deg) var(--translateZ); }
.cylinder-face:nth-child(54) { transform: var(--rotateX) rotateY(265deg) var(--translateZ); }
.cylinder-face:nth-child(55) { transform: var(--rotateX) rotateY(270deg) var(--translateZ); }
.cylinder-face:nth-child(56) { transform: var(--rotateX) rotateY(275deg) var(--translateZ); }
.cylinder-face:nth-child(57) { transform: var(--rotateX) rotateY(280deg) var(--translateZ); }
.cylinder-face:nth-child(58) { transform: var(--rotateX) rotateY(285deg) var(--translateZ); }
.cylinder-face:nth-child(59) { transform: var(--rotateX) rotateY(290deg) var(--translateZ); }
.cylinder-face:nth-child(60) { transform: var(--rotateX) rotateY(295deg) var(--translateZ); }
.cylinder-face:nth-child(61) { transform: var(--rotateX) rotateY(300deg) var(--translateZ); }
.cylinder-face:nth-child(62) { transform: var(--rotateX) rotateY(305deg) var(--translateZ); }
.cylinder-face:nth-child(63) { transform: var(--rotateX) rotateY(310deg) var(--translateZ); }
.cylinder-face:nth-child(64) { transform: var(--rotateX) rotateY(315deg) var(--translateZ); }
.cylinder-face:nth-child(65) { transform: var(--rotateX) rotateY(320deg) var(--translateZ); }
.cylinder-face:nth-child(66) { transform: var(--rotateX) rotateY(325deg) var(--translateZ); }
.cylinder-face:nth-child(67) { transform: var(--rotateX) rotateY(330deg) var(--translateZ); }
.cylinder-face:nth-child(68) { transform: var(--rotateX) rotateY(335deg) var(--translateZ); }
.cylinder-face:nth-child(69) { transform: var(--rotateX) rotateY(340deg) var(--translateZ); }
.cylinder-face:nth-child(70) { transform: var(--rotateX) rotateY(345deg) var(--translateZ); }
.cylinder-face:nth-child(71) { transform: var(--rotateX) rotateY(350deg) var(--translateZ); }
.cylinder-face:nth-child(72) { transform: var(--rotateX) rotateY(355deg) var(--translateZ); }
.cylinder-top, .cylinder-bottom {
    position: absolute;
    width: 502px;
    height: 502px;
    border-radius: 50%;
}
.cylinder-top {
    transform: rotateX(0deg) translateZ(9px) rotateZ(0deg);
}
.cylinder-bottom {
    transform: rotateX(-180deg) translateZ(9px) rotateZ(180deg);
}
/* Téléphones */
@media (max-width: 480px) { 
    .cylinder {
        position: relative;
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
    }
    .cylinder-face {
        left: 129px;
        top: 142px;
        background-size: 18px 100%;
        --translateZ: translateZ(150px);
    }
        .cylinder-top, .cylinder-bottom {
        position: absolute;
        width: 302px;
        height: 302px;
        border-radius: 50%;
    }
}         
@media (min-width: 481px) and (max-width: 767px) { ... }  /* Mobiles larges */
@media (min-width: 768px) and (max-width: 1024px) { ... } /* Tablettes */
@media (min-width: 1025px) and (max-width: 1280px) { ... }/* Laptops */
@media (min-width: 1281px) { ... }        /* Desktops */