A Pen by AplinXy9plin on CodePen.
Created
April 11, 2019 04:11
-
-
Save aplinxy9plin/0af5b229753c2abe2cc79e68d4999152 to your computer and use it in GitHub Desktop.
Flipping a CSS Coin (bitcoin?)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| world | |
| .floor | |
| - for (var i = 0; i < 12; i++) | |
| .line | |
| .coin | |
| .edge | |
| - for (var i = 0; i < 16; i++) | |
| .segment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let flippin = false, doc = document; | |
| doc.querySelector('.coin').addEventListener('click', e => { | |
| if(flippin) return false; flippin = true; | |
| //declare objects to animate, remove any existing anim | |
| let objs = doc.querySelectorAll('.line, .coin'); | |
| objs.forEach((line) => line.classList.remove('anim')); | |
| //choose heads or tails | |
| let winner = Math.random() > 0.5 ? '900deg' : '720deg'; | |
| doc.querySelector(':root').style.setProperty('--flips', winner) | |
| //apply animation and wait for completion | |
| setTimeout(() => { | |
| objs.forEach((line) => line.classList.add('anim')); | |
| e.target.addEventListener('animationend', () => flippin = false); | |
| }); | |
| }); | |
| //click once on load for the thumbnail | |
| setTimeout(() => doc.querySelector('.coin').click(), 750) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://codepen.io/tonybanik/pen/3f837b2f0085b5125112fc455941ea94.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Raleway:900'); | |
| $coin: #f7941e; | |
| $bg: #3e3b3b; | |
| $time: 1s; | |
| $coin-size: 150px; | |
| $coin-thicc: 6; // (size/thicc) | |
| :root{--flips: 540deg} | |
| *,*:before,*:after{box-sizing:border-box} | |
| body { | |
| background: $bg; | |
| display:grid; | |
| place-items:center; | |
| min-height:100vh; | |
| overflow:hidden; | |
| } | |
| .coin { | |
| height: $coin-size; | |
| width: $coin-size; | |
| transform-style: preserve-3d; | |
| transform-origin: 50%; | |
| cursor: grab; | |
| &.anim{ | |
| animation: flip $time linear forwards; | |
| } | |
| &:before,&:after{ | |
| display: grid; | |
| place-items: center; | |
| position:absolute; | |
| height:100%; | |
| width:100%; | |
| border-radius:50%; | |
| background:$coin; | |
| border:$coin-size*0.08 solid lighten($coin,5); | |
| box-shadow:inset 0 0 0 $coin-size*0.02 darken($coin,5); | |
| font-size:$coin-size*.4; | |
| font-family: 'Raleway', sans-serif; | |
| color:darken($coin,5); | |
| text-shadow: $coin-size*0.01 $coin-size*0.01 0 darken($coin,8), -1*($coin-size*0.01) -1*($coin-size*0.01) 0 lighten($coin,8); | |
| } | |
| &:before{transform: translateZ($coin-size/$coin-thicc/2); content: url("https://static-eu.insales.ru/images/products/1/6593/155720129/thumb_IMG_2675.JPG")} | |
| &:after{transform: translateZ(-$coin-size/$coin-thicc/2) rotateY(180deg) rotateZ(180deg); content:'I'} | |
| .edge { | |
| transform:translateX($coin-size/2-$coin-size/$coin-thicc/2); | |
| transform-style: preserve-3d; | |
| backface-visibility: hidden; | |
| .segment{ | |
| height: $coin-size; | |
| width: $coin-size/$coin-thicc; | |
| position: absolute; | |
| transform-style: preserve-3d; | |
| backface-visibility: hidden; | |
| &:before, &:after{ | |
| content: ''; | |
| display: block; | |
| height: $coin-size/10; | |
| width: $coin-size/$coin-thicc; | |
| position: absolute; | |
| transform: rotateX(84.375deg); | |
| } | |
| $e1: darken($coin,5); $e2: darken($coin,10); | |
| &:before{ | |
| transform-origin: top center; | |
| background: repeating-linear-gradient($e1 0,$e1 25%,$e2 25%,$e2 50%); | |
| } | |
| &:after{ | |
| bottom:0;transform-origin: center bottom; | |
| background: repeating-linear-gradient($e2 0,$e2 25%,$e1 25%,$e1 50%); | |
| } | |
| @for $i from 1 through 16{ | |
| &:nth-child(#{$i}) { | |
| transform: rotateY(90deg) rotateX($i*11.25deg); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .floor{ | |
| position:absolute; | |
| width:$coin-size; | |
| height:$coin-size; | |
| .line{ | |
| position:absolute; | |
| top:50%;left:50%; | |
| margin-top:-$coin-size/$coin-thicc/8; | |
| width:$coin-size; | |
| height:$coin-size/$coin-thicc/4; | |
| transform-origin:center left; | |
| border-radius:$coin-size/$coin-thicc/4; | |
| background:linear-gradient(90deg, white 20%, transparent 20%); | |
| background-repeat:no-repeat; | |
| opacity:0; | |
| &.anim{ | |
| animation: lines $time*0.6 ease-out forwards; | |
| animation-delay: 0.65s; | |
| } | |
| @for $i from 1 through 12{ | |
| &:nth-child(#{$i}) { | |
| @if $i % 2 == 0 {transform: rotate($i*30deg)} | |
| @else{transform: rotate($i*30deg) scale(1.1)} | |
| } | |
| } | |
| } | |
| } | |
| @keyframes flip { | |
| 0% {transform: rotateY(0) rotateX(0deg) scale(1)} | |
| 10% {transform: rotateY(45deg) rotateX(calc(var(--flips) / 3)) scale(1.6)} | |
| 60% {transform: rotateY(-30deg) rotateX(calc(var(--flips) / 1.5)) scale(2)} | |
| 100% {transform: rotateY(0) rotateX(var(--flips)) scale(1)} | |
| } | |
| @keyframes lines { | |
| 40% {opacity:1; background-position:-$coin-size*0.8 0} | |
| 70% {opacity:1; background-position:$coin-size*0.5 0} | |
| 100% {opacity:1; background-position:$coin-size*1 0} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment