A Pen by John Lancaster.

GBP.markdown

GBP

A Great British Pound coin spinning, created with 3D transforms and animation in CSS. I was reminded of old PS1 loading screens, where they just spun the disc forever, and never actually loaded a game. Perhaps that was just my experience.

Webkit only for now, just because.

A Pen by John Lancaster on CodePen.

License.

index.html

<!-- The New Coin -->
<div class="container">
 <div class="coin2">
  <div class="front"></div>
  <div id="object">
    <span>some text</span>
  </div>
 </div>
<span id="btn" class="purse flipcard">
  <div class="coin">
    <div class="front"></div>
    <div class="back"></div>
    <div class="side">
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
    </div>
  </div>
</span>
  
<a href="#" id="slideUpBtn" class="button">Slide Up &#8593;</a>

		<div id="transition_events">
			<h5>Events</h5>
			<ul>
			</ul>
		</div>
</div>

<!-- The Original Coin
<div class="purse">
  <div class="coin">
    <div class="front"></div>
    <div class="back"></div>
    <div class="side">
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
    </div>
  </div>
</div>
-->

script.js

/*
Add the 'skeleton' class to .coin
for x-ray vision, and to see how
the side of the coin is constructed.
*/
var addTransitionEvent = function(text) {
  $("#transition_events ul").append('<li>'+text+' <small class="muted">' + new Date() + '</small></li>');
	}

var counter = 0;

var myButton = $('#btn'),
       myBox = $('#object');

myButton.mousedown(function() {
  myBox.addClass("slideUp");
  //myBox.removeClass('hide');
  counter++;
  addTransitionEvent("Animation complete: " + counter);
  $('#object span').html("+" + counter);
});

 myBox.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',    
    function(e) {
    //myBox.addClass('hide');
    myBox.removeClass("slideUp");
  });

style.less

// Settings -------------------
@coin_diam: 160px;
@coin_diam_small: (@coin_diam * 0.94);
@coin_depth: (@coin_diam_small * 0.1);
@spin_speed: 1s;

// Wrapper --------------------
.purse {
  
  height: @coin_diam_small;
  width: @coin_diam_small;
  position: absolute;
  top: 50%; left: 50%;
  margin-top: (@coin_diam_small * -0.5);
  margin-left: (@coin_diam_small * -0.5);
  
  -webkit-perspective: 1000;
}

// The Coin -------------------
.coin2 {
  height: @coin_diam;
  width: @coin_diam;
  position: absolute;
  .front {
    position: absolute;
    
    height: @coin_diam;
    width: @coin_diam;
    
    border-radius: 50%;
    background-size: cover;
  }
}

.coin {
  height: @coin_diam_small;
  width: @coin_diam_small;
  position: absolute;
  
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50%;
  
  -webkit-animation: spin @spin_speed infinite;
  -webkit-animation-timing-function: linear;
  
  // Faces --------------------
  .front,
  .back {
    position: absolute;
    
    height: @coin_diam_small;
    width: @coin_diam_small;
    
    border-radius: 50%;
    background-size: cover;
  }
  
  .front {
    -webkit-transform: translateZ((@coin_depth / 2));
    // Images are included at the end...
  }
  
  .back {
    -webkit-transform: translateZ((@coin_depth / -2)) rotateY(180deg);
    // Images are included at the end...
  }
  
  // The Side -----------------
  // Reveal the ‘secret’ by adding
  // .skeleton to the coin element.
  .side {
    // How many facets you want
    @facets: 32;
    // How many spokes you need
    @spokes: (@facets / 2); 
    // Help figure out the length of each facet
    @degs: sin( pi() / (@facets));
    // Get the length
    @facet_length: (@coin_diam_small * @degs); 
    
    -webkit-transform: translateX( (@coin_diam_small * 0.45) );
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    
    // Structural Component
    .spoke {
      height: (@coin_diam_small);
      width: (@coin_depth);
      position: absolute;
      
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;      

      // The Facets
      &:before,
      &:after {
        content: '';
        display: block;
        height: @facet_length;
        width: (@coin_depth);
        position: absolute;
        -webkit-transform: rotateX(((180deg - (360 / @facets)) / 2)); // Get the right angle
        
        background: hsl(42, 52%, 68%);
        background: linear-gradient(
          to bottom,
          hsl(42, 60%, 75%) 0%,
          hsl(42, 60%, 75%) 74%,
          hsl(42, 40%, 60%) 75%,          
          hsl(42, 40%, 60%) 100%
        );
        background-size: 100% ((@facets * @facet_length) / 144);
      }
      
      // One at each end
      &:before {
        -webkit-transform-origin: top center;
      }
      
      &:after {
        bottom: 0;        
        -webkit-transform-origin: center bottom;
      }   
    }
    
    
    // This is a loop that positions the spokes
    .make_sides(@index) when (@index > 0) {
      
      .spoke:nth-child(@{index}) {
        -webkit-transform:
        rotateY(90deg)
        rotateX( (180deg / (@spokes)) * @index);
      }
      
      .make_sides(@index - 1);
    }
    
    // This is the loop happening
    .make_sides(@spokes);
	}

}

// Body, obviously
body {
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


// Just an animation
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}


// The images...
.coin .front {
  background-image: url("http://i.imgur.com/nNthhn7.png");
}
.coin2 .front {
  background-image: url("http://i.imgur.com/nNthhn7.png");
}


.coin .back {
  background-image: url("http://i.imgur.com/2IGwQpx.png");
}

// bounce css: http://jsfiddle.net/GEEtx/
.container .coin2{
  height: @coin_diam;
  width: @coin_diam;
  position: absolute;
  top: 50%; left: 50%;
  margin-top: (@coin_diam * -0.5);
  margin-left: (@coin_diam * -0.5);
  
  -webkit-perspective: 1000;
  z-index:1000;
}
.flipcard{
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transition:all 0.6s ease-in-out;
    -webkit-transition:all 0.6s ease-in-out;
}
//.allowhover:hover{
#btn:active {
//.flip {
    -moz-animation-name: bounce;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: 1 ;
    -moz-animation-direction: normal;
    
    -webkit-animation-name: bounce;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: 1 ;
    -webkit-animation-direction: normal;
}

@-moz-keyframes bounce {
   25% { top:7px; }
   45% { top:40px; }
   64% { top:19px; }
   76% { top:40px; }
   96% { top: 25px opacity:95; }
   100% { top:40px; opacity:0; }
}

@-webkit-keyframes bounce {
   25% { top:7px; }
   45% { top:40px; }
   64% { top:19px; }
   76% { top:40px; }
   96% { top: 25px opacity:95; }
   100% { top:40px; opacity:0; }
} 
 
#object span{
  color: green; 
  font-size: 30px;
  font-family: Comic Sans, Comic Sans MS;
  position: relative;
  left: 40%;
  top: -45px;
}
// click css http://stackoverflow.com/questions/18376815/trigger-animation-on-element-click-in-pure-css

// slide up: http://www.justinaguilar.com/animations/css/animations.css
/*
==============================================
slideUp
==============================================
*/


.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%); opacity: 0;
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%); opacity: 0;
	}	
}

#object{
	visibility: hidden;
}

.hide {
 opacity: 0; 
}