SDG Flip Cards CSS
Mon Oct 23 2023 18:06:44 GMT+0000 (Coordinated Universal Time)
Saved by @dannyholman #css
.cards { align-items: center; max-width: none; padding-left: 30px; } table { border-collapse: collapse; margin-top: auto; margin-bottom: auto; width: 100%; align-items: center; } td { border: 20px solid white; padding: 0; margin: auto; } .flip-card { background-color: white !important; border: 1px solid white; height: 300px; perspective: 1000px; width: auto; max-width: 20vw !important; } .flip-card-inner { height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d; width: 100%; max-width: 20vw; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); transform-origin: center !important; } .flip-card-front, .flip-card-back { backface-visibility: hidden; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .flip-card-front { background-color: white; color: white; display: flex; align-items: center; justify-content: center; z-index: 1; } .flip-card-back { color: #000000; transform: rotateY(180deg); display: auto; align-items: center; justify-content: auto; } h5, p { margin: 20px; color: #FFFFFF; } @media (min-width: 1541px) { .flip-card { width: 15vw; } .cards { padding-left: 100px; } } .img3 { max-width: 300px; height: auto; margin-left: auto; margin-right: auto; transform: translateX(-50px); transition: all 1.5s ease-out; opacity: 0; margin-left: 200px; margin-right: 20px; } .text3 { color: black; opacity: 0; transition: all 1.5s ease-out; transform: translateX(50px); text-align: left; font-size: 18px; margin-left: 20px; margin-right: 20px; } .animate { opacity: 1; transform: translateX(0); } #SDG3 { display: flex; padding-top: 40px; padding-bottom: 40px; } @media (min-width: 1593px) { #SDG3 { max-width: 80vw; padding-left: 200px; } } @media (max-width: 1050px) { .text3 { padding-top: 30px; transform: translateX(0); max-width: 70%; text-align: center; display: block; margin-left: 50px; margin-right: 50px; } .img3 { transform: translateX(0); max-width: 300px; height: auto; display: block; margin-left: 50px; margin-right: 50px; } #SDG3 { display: flex; flex-direction: column; align-items: center; text-align: center; } }
Comments