|
|
| Line 1: |
Line 1: |
| 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);
| |
| }
| |
| }
| |
| }
| |
| }
| |