mirror of
https://github.com/Steffo99/steffoweb.git
synced 2024-11-25 01:24:29 +00:00
53 lines
No EOL
972 B
CSS
53 lines
No EOL
972 B
CSS
.flipPanelContainer {
|
|
max-width: 476px;
|
|
|
|
display: flex;
|
|
justify-content: stretch;
|
|
align-items: stretch;
|
|
position: relative;
|
|
}
|
|
|
|
.flipPanelContainer .flipPanelContainer {
|
|
max-width: unset;
|
|
}
|
|
|
|
.flipPanel {
|
|
height: 100%;
|
|
|
|
transition-property: transform, z-index, opacity;
|
|
transition-duration: 1s, 1s, 0.5s;
|
|
transition-delay: 0s, 0s, 0s;
|
|
}
|
|
|
|
.flipPanelFront {
|
|
transform: rotateY(180deg);
|
|
z-index: 0;
|
|
user-select: none;
|
|
opacity: 0;
|
|
transition-delay: 0s, 0s, 0.5s;
|
|
}
|
|
|
|
.flipPanelFrontVisible {
|
|
transform: rotateY(0);
|
|
z-index: 1;
|
|
user-select: auto;
|
|
opacity: 1;
|
|
transition-delay: 0s, 0s, 0s;
|
|
}
|
|
|
|
.flipPanelBack {
|
|
transform: rotateY(180deg);
|
|
margin-left: -100%;
|
|
z-index: 0;
|
|
user-select: none;
|
|
opacity: 0;
|
|
transition-delay: 0s, 0s, 0.5s;
|
|
}
|
|
|
|
.flipPanelBackVisible {
|
|
transform: rotateY(0);
|
|
z-index: 1;
|
|
user-select: auto;
|
|
opacity: 1;
|
|
transition-delay: 0s, 0s, 0s;
|
|
} |