Revision 60865
Added by Konstantinos Triantafyllou about 3 years ago
| card.scss | ||
|---|---|---|
| 36 | 36 |
.uk-card .uk-button.action:hover:not(:disabled), .uk-card .uk-icon-button.action:hover:not(:disabled) {
|
| 37 | 37 |
box-shadow: 0 3px 6px rgba(71, 135, 230, 0.5); |
| 38 | 38 |
} |
| 39 |
|
|
| 40 |
/* --- Flip Card --- */ |
|
| 41 |
.uk-card.uk-card-flip {
|
|
| 42 |
background-color: transparent; |
|
| 43 |
height: 420px; |
|
| 44 |
perspective: 1000px; |
|
| 45 |
} |
|
| 46 |
|
|
| 47 |
/* This container is needed to position the front and back side */ |
|
| 48 |
.uk-card-flip-inner {
|
|
| 49 |
position: relative; |
|
| 50 |
width: 100%; |
|
| 51 |
height: 100%; |
|
| 52 |
transition: transform 1s; |
|
| 53 |
transform-style: preserve-3d; |
|
| 54 |
} |
|
| 55 |
|
|
| 56 |
/* Do an horizontal flip when you move the mouse over the flip box container */ |
|
| 57 |
.uk-card.uk-card-flip.uk-active .uk-card-flip-inner {
|
|
| 58 |
transform: rotateY(-180deg); |
|
| 59 |
} |
|
| 60 |
|
|
| 61 |
/* Position the front and back side */ |
|
| 62 |
.uk-card.uk-card-flip .front, .uk-card.uk-card-flip .back {
|
|
| 63 |
position: absolute; |
|
| 64 |
width: 100%; |
|
| 65 |
height: 100%; |
|
| 66 |
-webkit-backface-visibility: hidden; /* Safari */ |
|
| 67 |
backface-visibility: hidden; |
|
| 68 |
} |
|
| 69 |
.uk-card.uk-card-flip .front {
|
|
| 70 |
background-color: white; |
|
| 71 |
} |
|
| 72 |
|
|
| 73 |
/* Style the back side */ |
|
| 74 |
.uk-card.uk-card-flip .back {
|
|
| 75 |
background-color: white; |
|
| 76 |
transform: rotateY(180deg); |
|
| 77 |
} |
|
Also available in: Unified diff
[Library | Assets]: Add flip card css