User:Pax/secret.css
< User:Pax
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: black; } .scene { width: 1000px; display: flex; justify-content: space-between; perspective: 800px; .card { position: relative; width: 240px; height: 300px; color: white; cursor: pointer; transition: 1s ease-in-out; transform-style: preserve-3d; &:hover { transform: rotateY(0.5turn); } .card__face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: 1s ease-in-out; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4)); img { width: 240px; height: 300px; object-fit: cover; } &--back { transform: rotateY(0.5turn); } } } }