Flipping Letters Animation

This CSS Reference section displays the code for an example that illustrates an animation of flipping letters.

FlipLetters.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
    <style>
    	#idFlip span {
    		color:red;
    		font-size: 60px;
    		font-weight:bold;
    		font-family: times;
    		display: inline-block;
    		transform-style: preserve-3d;
    	}
    	#idFlip span:nth-child(1) {
    		animation: tFlipY 5s linear 0s infinite;
    	}
    	#idFlip span:nth-child(2) {
    		animation: tFlipY 4s linear 1s infinite;
    	}
    	#idFlip span:nth-child(3) {
    		animation: tFlipY 3s linear 2s infinite;
    	}
    	#idFlip span:nth-child(4) {
    		animation: tFlipY 2s linear 3s infinite;
    	}
    	@keyframes tFlipY {
    		0% {
    			transform: rotateY(0deg);
    		}
    		100% {
    			transform: rotateY(360deg);
    		}
    	}
  	</style>
  </head>
  <body>
  	<div id="idFlip">
  		<span>X</span>
  		<span>o</span>
  		<span>a</span>
  		<span>X</span>
  		<span>.</span>
  		<span>n</span>
  		<span>e</span>
  		<span>t</span>
  	</div>
  </body>
</html>

Output

X o a X . n e t