Advertisement
Guest User

Untitled

a guest
Jul 23rd, 2021
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.77 KB | None | 0 0
  1. svg {
  2.   transform: scale(1); // Correction des erreurs d'arrondi côté SVG
  3.  transform-style: preserve-3d;
  4.  
  5.  transition: transform .05s, filter .05s;
  6.  backface-visibility: hidden;
  7.  
  8.  transition: all 0.2s;
  9.  
  10.  &.ghost {
  11.    position: absolute;
  12.    z-index: -1;
  13.  }
  14. }
  15.  
  16. .flexContainer {
  17.  justify-items: center;
  18.  display: flex;
  19.  position: relative;
  20. }
  21. section {
  22.  margin: 50px auto;
  23.  width: 900px;
  24. }
  25. .cardContainer {
  26.  height: 406.15px;
  27.  width: 257.25px;
  28.  z-index: 1;
  29. }
  30. .perspective-card {
  31.  height: 406.15px;
  32.  perspective: 600px;
  33.  position: relative;
  34.  touch-action: none;
  35.  transform-style: preserve-3d;
  36.  width: 257.25px;
  37. }
  38. .perspective-card__shine {
  39.  border-radius: 20px;
  40.  left: 0px;
  41.  height: 100%;
  42.  position: absolute;
  43.  top: 0px;
  44.  transform: translateZ(.5px);
  45.  width: 100%;
  46. }
  47. .perspective-card__transformer {
  48.  height: 100%;
  49.  position: relative;
  50.  transform-style: preserve-3d;
  51.  width: 100%;
  52. }
  53. .perspective-card__artwork {
  54.  position: absolute;
  55.  top: 0;
  56. }
  57. .perspective-card__artwork--front {
  58.  background-color: #fff;
  59. }
  60. .perspective-card__artwork--rear {
  61.  transform: translateZ(-.5px) scaleX(-1);
  62. }
  63. .perspective-card .perspective-card__artwork--front  {
  64.  border-radius: 20px;
  65.  box-shadow: 5px 5px 0px rgba(0,0,0,.0);
  66.  display: block;
  67.  max-width: 100%;
  68.  transition: .5s linear box-shadow;
  69. }
  70. .perspective-card--over .perspective-card__artwork--front {
  71.  box-shadow: 5px 5px 20px rgba(0,0,0,.4);
  72. }
  73.  
  74. .perspective-card--matte {
  75.  background-color: rgba(0,0,0,.5);
  76.  height: 100vh;
  77.  left: 0;
  78.  opacity: 0;
  79.  position: fixed;
  80.  top: 0;
  81.  transition: opacity .5s linear;
  82.  width: 100vw;
  83.  z-index: 1000;
  84. }
  85.  
  86. .perspective-card--matte.modal {
  87.  opacity: 1;
  88. }
  89.  
  90. .perspective-card.modal {
  91.  z-index: 1001;
  92. }
  93.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement