Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: HTML5 Codes Library >> 3D Cubes >> Multiple 3D Cubes Using Transforms


Code Snippet </> Info


Snippet Name: Multiple 3D Cubes Using Transforms

Description: Create multiple 3D cubes that get viewers attention.

Compatible Browsers:
Chrome BrowserFirefox BrowserSafari Browser


Example: View Code Demo

Note: The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG.

Author: Paul Hayes

Last Modified: 2015-08-26 22:17:12

Language: html5

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library