Flip card effect.

[Morgalad]

I have written something really nice to simulate the flip card effect and I think it deserves to be shared.

l simulate the flip card effect with a couple of css and 3 divs

Code: Select all

 
 .roundtile {
	perspective: 200px;
	position: relative;
	margin: 2px;
	top:0px;
	display: inline-block;
	height: 100px;
	width: 100px;
	padding:1px }
	
.roundtile--front {
  top:0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s ease, visibility 1s ease;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border:2px solid #645b5e;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
  background-image: url('img/roundback.png');
  transform: rotateY(0deg) }

.roundtile--back {
  top:0px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s ease, visibility 1s ease;
  width: 99px;
  height: 99px;
  border-radius: 50%;
  border:2px solid #645b5e;
  background-repeat: no-repeat;
  position:abosulte;
  background-image: url('img/tiles.png');
  visibility: hidden;
  position: absolute;
  transform: rotateY(180deg) }

.roundtile.flipped  .roundtile--front {
    visibility: hidden;
    position: absolute;
    transform: rotateY(-180deg) }
  
 .roundtile.flipped .roundtile--back {
    visibility: visible;
    position: static;
    transform: rotateY(0deg) }
 

Then on the html you need to create some jstpl like this to generate the tiles with dojo.place and formatblock:

Code: Select all

var jstpl_round='<div id="rtile_${pos1}_${field1}" class="roundtile"><div class="roundtile--front"></div><div id="rtile_back_${pos2}_${field2}" class="roundtile--back"></div></div>';

then to flip one tile I wrote a little util function in js:

Code: Select all

fliproundtile: function ( location, location_arg, card_id )
		{
			card_width=100;
			card_height=100;
			cards_per_row=4;
			
			player_id = location.replace(/\D/g,'');  //regex to remove all the letters from a string and leave only numbers
			
			xpos= -1*card_width*((card_id - 1 )%cards_per_row );
			ypos= -1*card_height*(Math.floor( (card_id -1 ) /cards_per_row ));
			
			position= xpos+"px "+ ypos+"px ";   // This is to select the right tile of the aggregated tiles file "tiles.png"
			
			dojo.style('rtile_back_'+location_arg+'_'+player_id , "background-position", position);
			
			dojo.toggleClass('rtile_'+location_arg+'_'+player_id,"flipped", true);
		},

If you want to see this in action run the "bonbons" project on the studio.

(The css could be optimized with some inheritance but I prefer a more explicit way for clarity.)

[Cowseye]

Nice work! Consider putting this up in a Wiki entry?

[Victoria_La]

I will add it to sharedcode project