Saturday 27 May 2017

CSS 3D Transform Animation



<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D Transform Animation</title>
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<!-- Header -->
<header>
<h1>CSS3 3D Transform Animation</h1>
<div class="clearfix"></div>
</header>

<!-- Content -->
<section id="wrapper">

<!-- Title -->
<h2>Cube Rotation Effect</h2>
<div class="notice support">Yes! Your browser <strong>DOES support CSS3 3D transforms</strong>.</div>
<div class="notice unsupport">Oops! It look like your browser <strong>DOESN'T support CSS3 3D transforms</strong>, please use <strong>Chrome</strong> or <strong>Safari</strong> to view this page.</div>

<!-- Navigation -->
<nav id="navigation">
<ul>
<li class="current"><a href="#" title="Demo 1">DEMO</a></li>
</ul>
<div class="clearfix"></div>
</nav>


<div id="viewStage">
<div id="cube1" class="cube" >
<div class="facefront fb"></div>
<div class="faceback fb"></div>
<div class="faceleft lr"></div>
<div class="faceright lr"></div>
<div class="facetop tb"></div>
<div class="facebottom tb"></div>
</div>
<div id="cube2" class="cube" >
<div class="facefront fb"></div>
<div class="faceback fb"></div>
<div class="faceleft lr"></div>
<div class="faceright lr"></div>
<div class="facetop tb"></div>
<div class="facebottom tb"></div>
</div>
<div id="cube3" class="cube" >
<div class="facefront fb"></div>
<div class="faceback fb"></div>
<div class="faceleft lr"></div>
<div class="faceright lr"></div>
<div class="facetop tb"></div>
<div class="facebottom tb"></div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
</footer>
</body>

</html>

Download: