Update rotating-card.md
This commit is contained in:
@ -13,14 +13,10 @@ Creates a two sided card which rotates on hover.
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-side front">
|
||||
<div>
|
||||
Front Side
|
||||
</div>
|
||||
<div>Front Side</div>
|
||||
</div>
|
||||
<div class="card-side back">
|
||||
<div>
|
||||
Back Side
|
||||
</div>
|
||||
<div>Back Side</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -28,13 +24,13 @@ Creates a two sided card which rotates on hover.
|
||||
```css
|
||||
.card {
|
||||
perspective: 150rem;
|
||||
-moz-perspective: 150rem;
|
||||
position: relative;
|
||||
height: 40rem;
|
||||
max-width: 400px;
|
||||
margin: 2rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-side {
|
||||
height: 35rem;
|
||||
border-radius: 15px;
|
||||
@ -47,18 +43,22 @@ Creates a two sided card which rotates on hover.
|
||||
padding:2rem;
|
||||
color: white
|
||||
}
|
||||
|
||||
.card-side.back {
|
||||
transform: rotateY(-180deg);
|
||||
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:hover .card-side.front {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card:hover .card-side.back {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user