Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- svg {
- transform: scale(1); // Correction des erreurs d'arrondi côté SVG
- transform-style: preserve-3d;
- transition: transform .05s, filter .05s;
- backface-visibility: hidden;
- transition: all 0.2s;
- &.ghost {
- position: absolute;
- z-index: -1;
- }
- }
- .flexContainer {
- justify-items: center;
- display: flex;
- position: relative;
- }
- section {
- margin: 50px auto;
- width: 900px;
- }
- .cardContainer {
- height: 406.15px;
- width: 257.25px;
- z-index: 1;
- }
- .perspective-card {
- height: 406.15px;
- perspective: 600px;
- position: relative;
- touch-action: none;
- transform-style: preserve-3d;
- width: 257.25px;
- }
- .perspective-card__shine {
- border-radius: 20px;
- left: 0px;
- height: 100%;
- position: absolute;
- top: 0px;
- transform: translateZ(.5px);
- width: 100%;
- }
- .perspective-card__transformer {
- height: 100%;
- position: relative;
- transform-style: preserve-3d;
- width: 100%;
- }
- .perspective-card__artwork {
- position: absolute;
- top: 0;
- }
- .perspective-card__artwork--front {
- background-color: #fff;
- }
- .perspective-card__artwork--rear {
- transform: translateZ(-.5px) scaleX(-1);
- }
- .perspective-card .perspective-card__artwork--front {
- border-radius: 20px;
- box-shadow: 5px 5px 0px rgba(0,0,0,.0);
- display: block;
- max-width: 100%;
- transition: .5s linear box-shadow;
- }
- .perspective-card--over .perspective-card__artwork--front {
- box-shadow: 5px 5px 20px rgba(0,0,0,.4);
- }
- .perspective-card--matte {
- background-color: rgba(0,0,0,.5);
- height: 100vh;
- left: 0;
- opacity: 0;
- position: fixed;
- top: 0;
- transition: opacity .5s linear;
- width: 100vw;
- z-index: 1000;
- }
- .perspective-card--matte.modal {
- opacity: 1;
- }
- .perspective-card.modal {
- z-index: 1001;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement