ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A HTML5 CSS3 Tutorial On Creating Special Effects: Creating A Rotating Cube

Updated on May 11, 2014

The Goal of This Tutorial: A Rotating Cube

In this tutorial we will create a cube in HTML5 and CSS. It will be a stepwize process and we will try to be as clear as possible with some of the coding that you might not be aware of if you are just a beginner.

We will avoid making it too complex and for that reason the code will be minimal.For example statements which might be browser dependent will me minimized. Thus you will find -webkit- and W3C official naming in the code, but no -ms-, -o-, -moz- references for the sake of brevity. The final section of this tutorial will have the complete code which is guaranteed to run in a Chrome environment.

Future tutorials will refer back to this model with some specific suggestions for enhancement. Steps leading up to the final version will have the code snippets necessary for the final example. So if you buildup the code section by section at the end of this tutorial you should have a complete running model. The final section code is ther if you want to copy it or for some reason you have a typo in what you created.

Our Finished Cube: Several Views

Color adds a dramatic effect to the cube hsla or rgba with the fourth value opacity be set adds to the cubes overall actractiveness.
Color adds a dramatic effect to the cube hsla or rgba with the fourth value opacity be set adds to the cubes overall actractiveness.
Positioning being set is inportant when setting up the class for the cube and container elements, otherwise the cube will float off the screen.
Positioning being set is inportant when setting up the class for the cube and container elements, otherwise the cube will float off the screen.

Let's Start Looking at A Cube

You might want to get a block of wood, a box of tea, something material that you can model It may help later to have a physical object to compare with the code.

A cube has six sides and i labeled mine: top, bottom, left, right, front, and back. Nowlet's start with Step #1.

Our Cube Positioned Before Animation

Note there is the slight illusion of a 3D cube caused by setting the level of opacity
Note there is the slight illusion of a 3D cube caused by setting the level of opacity

Step #1: Create or Copy the HTML Framework

For sake of clarity and having everything in one file, I will be including all of my styling in the HTML file.

My HTML framework looks like the following:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" /> 
 <title>Building a 3D Object: A Cube</title> 
 
 <style>
</style>
</head>
<body>
</body>
</html>


This should be pretty much self-explanatory,

Step #2: The Cube Layout Code

The cube has six side as mentioned above: top,bottom,left, right, front, and back. In previous version of HTML one would have to create surface of the cube with a <div>. Nowadays, one can use the <figure> tag. Although the side do not have a <figcaption>, I believe that this is a good use of the <figure> tag since we will be labeling each side.

Each side participate in the cube structure in a particular way, there it is necessary to identify each with an <id> or <class>. Perhaps later on you will want more than one cube displayed on your screen so a good option might be to create each ifure in its own class rather than in an <id>.

The CSS properties are inherited from parent element. Our cube surfaces are children of the cube so they are wrapped within a cube element. The cube itself inherits properties from its parent a container.

This "wrap" within a "wrap" is coded as follows where I have chosen to set the container as a <section> and the cube as a <div> within it.

<body>
 <h1>Defining a Cube</h1>
 <section class="container">
 <div id="cube" class="spinning">
 <figure class="front">Front</figure>
 <figure class="back">Back</figure>
 <figure class="left">Left</figure>
 <figure class="right">Right</figure>
 <figure class="top">Top</figure>
 <figure class="bottom">Bottom</figure>
 </div>
 </section>
</body>
</html>


I added a <h1> tag as the only other text to be displayed. This code is all that the <body> will consist of.

Step #3 :Styling the Container - Giving the Cube Perspective

What the contain really provides to the cube is the perspective property. Since this code will be used in future examples, I have included a few embellishments.

The container code looks like the following:

.container {
 width: 200px;
 height: 200px;
 position: relative;
 margin: 0 auto 40px;
 border: 12px solid grey;
-webkit-perspective: 1200px;
 perspective: 1200px;
 }

Step #4: Style Element Requirements

The cube will be 200 pixels wide, with relative positioning.In that way,the absolute positioned faces will stay within bounds otherwise the cube will "float off" the screen at times. We'll also use preserve-3d to keep the element 3D and not flat.

We will also embellish each cube face as follows:

#cube {
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;}


To #cube we add:

-webkit-transform: translateZ( -100px );
transform: translateZ( -100px );


to push back the 3D object, so that the front face will be positioned back at the Z origin.

We might as well "pretty up" the faces of the cube

#cube figure {
display: block;
position: absolute;
width: 196px;
height: 196px;
border: 2px
solid black;
line-height: 196px;
font-size: 20px;
font-weight: bold;
color: white;
text-align: center; }

Step #5: Create Transformation Code for Cube Faces

With the position and dimensions of the faces set, we start creating the transformation code for individual faces:

#cube .front {
 -webkit-transform: translateZ( 100px );
 transform: translateZ( 100px );
 }
 #cube .back {
 -webkit-transform: rotateX( -180deg ) translateZ( 100px );
 transform: rotateX( -180deg ) translateZ( 100px );
 }
 #cube .right {
 -webkit-transform: rotateY( 90deg ) translateZ( 100px ); 
 transform: rotateY( 90deg ) translateZ( 100px );
 }
 #cube .left {
 -webkit-transform: rotateY( -90deg ) translateZ( 100px );
 transform: rotateY( -90deg ) translateZ( 100px );
 }
 #cube .top {
 -webkit-transform: rotateX( 90deg ) translateZ( 100px );
 transform: rotateX( 90deg ) translateZ( 100px );
 }
 #cube .bottom {
 -webkit-transform: rotateX( -90deg ) translateZ( 100px );
 transform: rotateX( -90deg ) translateZ( 100px );
 }


This is where having a physical model at hand is helpful the surfaces move in opposition to their counterpart. For example when the top rotates +90 degrees the bottom needs to rotate a negative 90 degrees.

Step #6: Adding Display Qualities: Translucence & Color

With rgba() or hsla() color palettes we can give our cube not only color but a degree of opacity. Stepping color wheel values can give a good effect.

The code for this is:

#cube .front { background: hsla( 30, 100%, 50%, 0.8 ); }
 #cube .back { background: hsla( 90, 100%, 50%, 0.8 ); }
 #cube .right { background: hsla( 150, 100%, 50%, 0.8 ); }
 #cube .left { background: hsla( 210, 100%, 50%, 0.8 ); }
 #cube .top { background: hsla( 270, 100%, 50%, 0.8 ); }
 #cube .bottom { background: hsla( 330, 100%, 50%, 0.8 ); }

Step #7: Set the Whole Thing Spinning

Now let's add in the animation:


 #cube.spinning {
      -webkit-animation: spinCubeWebkit 8s infinite ease-in-out;
              animation: spinCube       8s infinite ease-in-out;
    }

CSS3 @keyframes Rule The @keyframes rule is where the animation is created. A CSS style inside the @keyframes rule causes the animation. A gradual change from the current style to the new style.

    @-webkit-keyframes spinCubeWebkit {
        0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
      100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
    }

The Full Code Example

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" /> 
 <title>Building a 3D Object: A Cube</title> 
 
 <style>
.container {
 width: 200px;
 height: 200px;
 position: relative;
 margin: 0 auto 40px;
 border: 12px solid #CCC;
-webkit-perspective: 1200px;
 perspective: 1200px;
 }
#cube {
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translateZ( -100px );
 transform: translateZ( -100px );
 }
#cube.spinning {
 -webkit-animation: spinCubeWebkit 8s infinite ease-in-out;
 animation: spinCube 8s infinite ease-in-out;
 }
@-webkit-keyframes spinCubeWebkit {
 0% { -webkit-transform: translateZ( -100px ) rotateX( 0deg ) rotateY( 0deg ); }
 100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
 }
 
 #cube figure {
 display: block;
 position: absolute;
 width: 196px;
 height: 196px;
 border: 2px solid black;
 line-height: 196px;
 font-size: 20px;
 font-weight: bold;
 color: white;
 text-align: center;
 }
 #cube.panels-backface-invisible figure {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 }
#cube .front { background: hsla( 30, 100%, 50%, 0.8 ); }
 #cube .back { background: hsla( 90, 100%, 50%, 0.8 ); }
 #cube .right { background: hsla( 150, 100%, 50%, 0.8 ); }
 #cube .left { background: hsla( 210, 100%, 50%, 0.8 ); }
 #cube .top { background: hsla( 270, 100%, 50%, 0.8 ); }
 #cube .bottom { background: hsla( 330, 100%, 50%, 0.8 ); }
#cube .front {
 -webkit-transform: translateZ( 100px );
 transform: translateZ( 100px );
 }
 #cube .back {
 -webkit-transform: rotateX( -180deg ) translateZ( 100px );
 transform: rotateX( -180deg ) translateZ( 100px );
 }
 #cube .right {
 -webkit-transform: rotateY( 90deg ) translateZ( 100px ); 
 transform: rotateY( 90deg ) translateZ( 100px );
 }
 #cube .left {
 -webkit-transform: rotateY( -90deg ) translateZ( 100px );
 transform: rotateY( -90deg ) translateZ( 100px );
 }
 #cube .top {
 -webkit-transform: rotateX( 90deg ) translateZ( 100px );
 transform: rotateX( 90deg ) translateZ( 100px );
 }
 #cube .bottom {
 -webkit-transform: rotateX( -90deg ) translateZ( 100px );
 transform: rotateX( -90deg ) translateZ( 100px );
 }
 </style>
</head>
<body>
 <h1>Defining a Cube</h1>
 <section class="container">
 <div id="cube" class="spinning">
 <figure class="front">Front</figure>
 <figure class="back">Back</figure>
 <figure class="left">Left</figure>
 <figure class="right">Right</figure>
 <figure class="top">Top</figure>
 <figure class="bottom">Bottom</figure>
 </div>
 </section>
</body>
</html>

Please Rate This Tutorial and Add Your Comments

Cast your vote for Was this tutorial beneficial to you?

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)