Card Flip Animations

Hey Guys, it is the second decade of the second millennium and we are still kicking around the same 2D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon, 2011 is right around the corner. That’s Twenty Eleven folks. Where is our 3D virtual reality? By now, we should be zipping around the Metaverse in super-sonic motorbikes. Granted, the capability of rendering complex 3D environments has been present for years. On the Web, there already are number of solutions – Flash, three.js in canvas, and eventually WebGL. And finally, we meager front-end developers have our own three-dimensional jewel: CSS 3D Transforms!





<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>flip-container<span class="token punctuation">"</span></span> <span class="token attr-name">ontouchstart<span class="token punctuation">="</span>this.classList.toggle(<span class="token punctuation">'</span>hover<span class="token punctuation">'</span>);<span class="token punctuation">"</span>></span></span>
	<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>flipper<span class="token punctuation">"</span>></span></span>
		<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>front<span class="token punctuation">"</span>></span></span>
			<span class="token comment" spellcheck="true"><!-- front content --></span>
		<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
		<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class<span class="token punctuation">="</span>back<span class="token punctuation">"</span>></span></span>
			<span class="token comment" spellcheck="true"><!-- back content --></span>
		<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
	<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>




There are two content panes, “front” and “back”, as you would expect, but also two containing elements with very specific roles explained by their CSS. Also note the ontouchstart piece which allows the panes to swap on touch screens. Obviously you should break that code into a separate, unobtrusive JavaScript block if you wish.





/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}



          







	
	

	

	
	

		
		

			
			

				
				

					Posted				

				

				


				
				

					in				

				

				

			

			

			
			

				
				

					by				

				

				
kushal

			

			
		

		

		
		

			
			

				
				

					Tags:				

				

				
, , , 

			

			
		

		
	

	






          



	






        

      

      

        


          


            
              
            
          

        

        

          

            Recent Post
          

          

            
  • How to Implement In-Order, Pre-Order, and Post-Order Tree Traversal in Python?
    Tree traversal is an essential operation in many tree-based data structures. In binary trees, the most common traversal methods are in-order traversal, pre-order traversal, and post-order traversal. Understanding these tree traversal techniques is crucial for tasks such as tree searching, tree printing, and more complex operations like tree serialization. In this detailed guide, we will […]
  • Mastering Merge Sort: A Comprehensive Guide to Efficient Sorting
    Are you eager to enhance your coding skills by mastering one of the most efficient sorting algorithms? If so, delve into the world of merge sort in Python. Known for its powerful divide-and-conquer strategy, merge sort is indispensable for efficiently handling large datasets with precision. In this detailed guide, we’ll walk you through the complete […]
  • Optimizing Chatbot Performance: KPIs to Track Chatbot Accuracy
    In today’s digital age, chatbots have become integral to customer service, sales, and user engagement strategies. They offer quick responses, round-the-clock availability, and the ability to handle multiple users simultaneously. However, the effectiveness of a chatbot hinges on its accuracy and conversational abilities. Therefore, it is necessary to ensure your chatbot performs optimally, tracking and […]
  • Reinforcement Learning: From Q-Learning to Deep Q-Networks
    In the ever-evolving field of artificial intelligence (AI), Reinforcement Learning (RL) stands as a pioneering technique enabling agents (entities or software algorithms) to learn from interactions with an environment. Unlike traditional machine learning methods reliant on labeled datasets, RL focuses on an agent’s ability to make decisions through trial and error, aiming to optimize its […]
  • Understanding AI Predictions with LIME and SHAP- Explainable AI Techniques
    As artificial intelligence (AI) systems become increasingly complex and pervasive in decision-making processes, the need for explainability and interpretability in AI models has grown significantly. This blog provides a comprehensive review of two prominent techniques for explainable AI: Local Interpretable Model-agnostic Explanations (LIME) and Shapley Additive Explanations (SHAP). These techniques enhance transparency and accountability by […]
  • Building and Deploying a Custom Machine Learning Model: A Comprehensive Guide
    Machine Learning models are algorithms or computational models that act as powerful tools. Simply put, a Machine Learning model is used to automate repetitive tasks, identify patterns, and derive actionable insights from large datasets. Due to these hyper-advanced capabilities of Machine Learning models, it has been widely adopted by industries such as finance and healthcare.  […]



          

        

      

    

    
      
    
  










Click to Copy