Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS Multiple 3D Cube Using Transforms</title>

<style>
/* Begin HTML5 CSS Multiple 3D Cube Using Transforms */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by:Paul Hayes :http://www.paulrhayes.com/2009-04/3d-cube-using-css-transformations/ :Creative Commons License == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;}
.cube {position:fixed;left:50%;top:300px;}
.cube p {line-height:14px;font-size:12px;}
.cube h2 {font-weight:bold;}
.cube.two {top:416px;left:50%;margin-left:-200px;}
.cube.three {top:532px;left:50%;margin-left:-400px;}
.rightFace, .leftFace, .topFace div {padding:10px;width:180px;height:180px;}
.rightFace,.leftFace,.topFace {position:absolute;}
.cube:hover .rightFace, .cube:hover .leftFace,.cube:hover .topFace div {background-color:#ffc;}
.cube:hover .rightFace:hover, .cube:hover .leftFace:hover, .cube:hover .topFace:hover div {background-color:#ffa;}
.leftFace {-webkit-transform:skew(0deg, 30deg);-moz-transform:skew(0deg, 30deg);-o-transform:skew(0deg, 30deg);-ms-transform:skew(0deg, 30deg);transform:skew(0deg, 30deg);background-color:#ccc;}
.rightFace {-webkit-transform:skew(0deg, -30deg);-moz-transform:skew(0deg, -30deg);-o-transform:skew(0deg, -30deg);-ms-transform:skew(0deg, -30deg);transform:skew(0deg, -30deg);background-color:#ddd;left:200px;}
.topFace div {-webkit-transform:skew(0deg, -30deg) scale(1, 1.16);-moz-transform:skew(0deg, -30deg) scale(1, 1.16);-o-transform:skew(0deg, -30deg) scale(1, 1.16);-ms-transform:skew(0deg, -30deg) scale(1, 1.16);transform:skew(0deg, -30deg) scale(1, 1.16);background-color:#eee;font-size:0.862em;}
.topFace {-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);top:-158px;left:100px;}
/* Optional Animations */
.cube {-webkit-transition:-webkit-transform 1s linear;-moz-transition:-moz-transform 1s linear;-o-transition:-o-transform 1s linear;-ms-transition:-ms-transform 1s linear;transition:transform 1s linear;}
.cube:hover {-webkit-transform:translate(202px, 115px);-moz-transform:translate(202px, 115px);-o-transform:translate(202px, 115px);-ms-transform:translate(202px, 115px);transform:translate(202px, 115px);}
</style>

</head>
<body>

<h3>HTML5 CSS Multiple 3D Cube Using Transforms Example</h3>
<p>Roll your cursor over the cube for movement demonstration.</p>

<!-- ************************** -->
<!-- BEGIN EXPERIMENT -->
<!-- ************************** -->
<div id="experiment">
<div class="cube">
<div class="topFace"><div>
<h2>Top cube face</h2>
<p>The top face is nested in an extra div tag to give correct rotation of skewed rectangle.</p>
<p>This face is also scaled, so the font size has been reduced to accommodate.</p>
</div></div>
<div class="leftFace">
<h2>Left cube face</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this code.</p>
</div>
<div class="rightFace">
<h2>Right cube face</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this code.</p>
</div>
</div>
<div class="cube two">
<div class="topFace"><div>
<h2>Top cube face</h2>
<p>The top face is nested in an extra div tag to give correct rotation of skewed rectangle.</p>
<p>This face is also scaled, so the font size has been reduced to accommodate.</p>
</div></div>
<div class="leftFace">
<h2>Left cube face</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this code.</p>
</div>
<div class="rightFace">
<h2>Right cube face</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this code.</p>
</div>
</div>
<div class="cube three">
<div class="topFace"><div>
<h2>Top cube face</h2>
<p>The top face is nested in an extra div tag to give correct rotation of skewed rectangle.</p>
<p>This face is also scaled, so the font size has been reduced to accommodate.</p>
</div></div>
<div class="leftFace">
<h2>Left cube face</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this code.</p>
</div>
<div class="rightFace">
<h2>Right cube face</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this code.</p>
</div>
</div>
</div>
<!-- ************************** -->
<!-- END OF EXPERIMENT -->
<!-- ************************** -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_129.html">Multiple 3D Cubes Using Transforms</a> page. ]
</div>
</body>
</html>