Snap Builder HTML5 CSS3 Free Public Codes Library


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

<style>
/* Begin HTML5 CSS 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:absolute;left:50%;top:300px;margin-left:-200px;}
.cube p {line-height:14px;font-size:12px;}
.cube h2 {font-weight:bold;}
.rightFace,.leftFace,.topFace div {padding:10px;width:180px;height:180px;}
.rightFace,.leftFace,.topFace {position:absolute;}
.leftFace {-webkit-transform:skew(0deg, 30deg);-moz-transform:skew(0deg, 30deg);background-color:#ccc;}
.rightFace {-webkit-transform:skew(0deg, -30deg);-moz-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);background-color:#eee;font-size:0.862em;}
.topFace {-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);top:-158px;left:100px;}
/* Optional WebKit Animations */
.rightFace {-webkit-transition:-webkit-transform 1s linear;}
.leftFace {-webkit-transition:-webkit-transform 1s linear;}
.topFace {-webkit-transition:-webkit-transform 1s linear;}
.cube:hover .rightFace {-webkit-transform:skew(0deg, -30deg) translate(100px, 100px);}
.cube:hover .leftFace {-webkit-transform:skew(0deg, 30deg) translate(-100px, 100px);}
.cube:hover .topFace {-webkit-transform:rotate(60deg) translate(-50px, -50px);}
/* Video */
.cube video {left:-20px;top:-20px;position:relative;}
.cube div.rightFace video {left:-301px;top:-35px;opacity:0.9;}
.cube div.leftFace video {opacity:0.7;top:-35px;left:-100px;}
.cube div.rightFace,.cube div.leftFace {overflow:hidden;}
.cube div.topFace.video div {background-color:#000;color:#fff;}
</style>

</head>
<body>

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

<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 codes demonstration purpose.</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 codes demonstration purpose.</p>
</div>
</div>
</div>

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