User:Pax/secret.css: Difference between revisions
< User:Pax
(Blanked the page) Tag: Blanking |
No edit summary |
||
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); | |||
} | |||
} | |||
} | |||
} |
Revision as of 15:12, 16 January 2021
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); } } } }