andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update rotating-card.md

Browse Source
This commit is contained in:
Angelos Chalaris
2020-10-04 14:24:04 +03:00
committed by GitHub
parent 7c9fd630b8
commit 7ef1b7d7ed
1 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
snippets/rotating-card.md
View File

@ -5,61 +5,61 @@ tags: animation,advanced
Creates a two sided card which rotates on hover. Creates a two sided card which rotates on hover.
- Set the the `backface-visibility ` of the cards to none. - Set the the `backface-visibility` of the cards to none.
- Initially `rotateY` the back side of the card by `-180deg` and the front side to `0deg`. - Initially `rotateY` the back side of the card by `-180deg` and the front side to `0deg`.
- Upon hover, `rotateY` the front side to `180deg` and backside to `0deg`. - Upon hover, `rotateY` the front side to `180deg` and backside to `0deg`.
- Set the appropriate `perspective ` value to create the rotate effect . - Set the appropriate `perspective` value to create the rotate effect.
```html ```html
<div class="card"> <div class="card">
<div class="card-side front"> <div class="card-side front">
<div> <div>Front Side</div>
Front Side </div>
</div> <div class="card-side back">
</div> <div>Back Side</div>
<div class="card-side back"> </div>
<div>
Back Side
</div>
</div>
</div> </div>
``` ```
```css ```css
.card { .card {
perspective: 150rem; perspective: 150rem;
-moz-perspective: 150rem; position: relative;
position: relative; height: 40rem;
height: 40rem; max-width: 400px;
max-width: 400px; margin: 2rem;
margin: 2rem; box-shadow: none;
box-shadow: none; }
}
.card-side { .card-side {
height: 35rem; height: 35rem;
border-radius: 15px; border-radius: 15px;
transition: all 0.8s ease; transition: all 0.8s ease;
backface-visibility: hidden; backface-visibility: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 80%; width: 80%;
padding:2rem; padding:2rem;
color: white color: white
} }
.card-side.back {
transform: rotateY(-180deg); .card-side.back {
background-color: #4158D0; transform: rotateY(-180deg);
background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%); background-color: #4158D0;
} background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
.card-side.front { }
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); .card-side.front {
} background-color: #0093E9;
.card:hover .card-side.front { background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
transform: rotateY(180deg); }
}
.card:hover .card-side.back { .card:hover .card-side.front {
transform: rotateY(0deg); transform: rotateY(180deg);
} }
.card:hover .card-side.back {
transform: rotateY(0deg);
}
``` ```