Mais ações
Criou página com '.flip-card { background-color: transparent; width: 190px; height: 254px; →perspective: 1000px;: font-family: sans-serif; } .title { font-size: 1.5em; font-weight: 900; text-align: center; margin: 0; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-...' |
mSem resumo de edição |
||
| (Uma revisão intermediária pelo mesmo usuário não está sendo mostrada) | |||
| Linha 1: | Linha 1: | ||
.flip-card { | .flip-card { | ||
background-color: transparent; | background-color: transparent; | ||
width: 190px; | min-width: 190px; | ||
height: 254px; | min-height: 254px; | ||
/*perspective: 1000px;*/ | /*perspective: 1000px;*/ | ||
font-family: sans-serif; | font-family: sans-serif; | ||
| Linha 11: | Linha 11: | ||
font-weight: 900; | font-weight: 900; | ||
text-align: center; | text-align: center; | ||
margin: | margin: 15px; | ||
} | } | ||
Edição atual tal como às 16h16min de 18 de agosto de 2024
.flip-card {
background-color: transparent;
min-width: 190px;
min-height: 254px;
/*perspective: 1000px;*/
font-family: sans-serif;
}
.title {
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin: 15px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
/*-webkit-backface-visibility: hidden;*/
backface-visibility: hidden;
border: 1px solid coral;
border-radius: 1rem;
}
.flip-card-front {
background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
color: coral;
}
.flip-card-back {
background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
bisque 40%, rgb(255, 185, 160) 78%);
color: white;
transform: rotateY(180deg);
}