Click here to Skip to main content
12,892,320 members (51,067 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


24 bookmarked
Posted 9 Sep 2015

Beginner's Guide to HTML5 & CSS3 - Getting Fancy with HTML5 & CSS3 (Series 5 of 12)

, 9 Sep 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
All about CSS3 Text Effects, Animations, Transformations and few other HTML5 Tags


In this article we will learn more about CSS3 and some HTML5 related stuffs. By the end of the article you should be able to learn and understand the concepts and make use it in your day to day activities.

This article is created with an effort in bringing interactive experience to the reader. Please feel free to run the demo for better experience. In order for you to feel a real time experience with the concepts explained in this article, Try it out option is provided (All code samples are developed using editor) demonstrating the samples in a way you will interact with the sample code and learn. Feel free to open up, edit and see how the code works.

Let us focus on the below mentioned topics.


If you are a beginner, it's highly recommended to read through the following articles to understand more about the HTML and CSS.

Beginner's Guide to HTML5 and CSS3 - Writing Your First Code (Series 1 of 12)

Beginner's Guide to HTML5/CSS3 - Styling Your First Web Page (Series 3 of 12)

Beginner's Guide to HTML5 & CSS3 : Laying Out Your First Web Page (Series 4 of 12)

Working with HTML5 Audio and Video tags

HTML5 Video Tag

Prior to HTML5 video tags, if you wish to embed a video in an HTML document, most people used Adobe Flash to show a video regardless of browsers and operating system. But it required a flash plug-in which is a dependency. Other handful third party plug-ins include RealPlayer, Quicktime. With HTML5, an open standard was created to support for audio and video tag and can be easily included. More than that the new standard removed the proprietary third party dependency.

HTML5 supports new tags for including audio and video tags in HTML document. It can be done easily like we include images in a document. A new <video> tag was introduced to show up videos in a HTML document.

Below is an example shows how we can embed a video

<video src="sampleVideo.mp4" width="500" height="400" controls>
    Your browser does not support video element.   

If the HTML5 video tag is supported by the browser, it will show up the media player and you can play, pause a video. Say if your browser does not support HTML5, you will see a label indicating “Your browser does not support video element”.

We need a fallback mechanism to play a video if the browser does not support video elements. We can have the default fallback mechanism as Flash. Here's the code snippet shows the usage of video element with a fallback.

<video src="Testvideo.mp4" controls>
    <object data="Testvideo.swf" type="application/x-shockwave-flash">
        <param value="Testvideo.swf" name="Test Movie"/>

Also there are cases where the browser supports video element but it may not support the video format. In such cases, it's always good to add multiple formats of same video so either one of the supporting formats can be used as a fall back mechanism in case the browser does not support one of them.

Below is an example which demonstrates the fallback mechanism which also includes Flash an an option.

<video controls>
  <source src="TestVideo.webm" 
          type='video/webm;codecs="vp8, vorbis"'/>
  <source src="TestVideo.mp4"
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
  <object data="Testvideo.swf" type="application/x-shockwave-flash">
        <param value="Testvideo.swf" name="Test Movie"/>

Now let us see the video element properties.

Quote: The video properties are based on [1]
  • width – Used to set the width of the video element in pixels. If you don't specify width, the browser will use the default width of the video, if it’s available.
  • height – Used to set the height of the video element. If you don't specify height, the browser will use the default height of the video.
  • src – Used to set the video file to be played. Must be one of the supporting formats *.mp4, *.webm, *.ogv
  • poster – Used to set the image file that will be displayed while the video content is being loaded. If you don't specify the poster property, the browser will show the first frame of the video.
  • autoplay – autoplay instructs the browser to automatically play the video when the page is loaded.
  • controls – Shows up the video controls to control the video playback. Note the controls are only visible when the user hovers over a video.
  • loop – The loop property instructs the browser to loop the media playback.
  • autobuffer – When used the video is downloaded in the background. When the user decides to watch the video, it starts immediately.

Now coming to the use of codecs in browsers, There are lots of video format but the most common ones are H.264 (MPEG 4 Advanced Video Coding(ACV)), Ogg Theora and VP8. Support for the codecs wasn't that simple because the browsers vendors could not agree upon a specific codec.

H.264 is the most popular one but it's patented however it's free for non commercial use. When it comes to commercial, currently it's supported by IE 9, Safari 3.1, and Chrome. The Ogg Theora comes with a royalty fee and is supported by Firefox 3.5, Chrome 4, Opera 10.5. The VP8 or WebM was acquired by Google released as opensource and is being supported by Firefox 4.0, Chrome 6.0, Opera 10.6.

In the below example you can see a video tag with multiple sources (Most popular codec formats)

<video id="TestMovie" width="750" height="350" preload controls>
    <source src="" />
    <source src="TestMovie_Ogg.ogv" />
    <source src="TestMovie_WebM.webm" />

Here's a live example of a HTML5 video. You can notice the controls to play, pause etc are shown by default that's because of the usage of “controls” in video tag.

The below example is based on HTML5 Rocks demo [2]

<video preload="metadata" controls> 
    <source src="" type="video/mp4">
    <source src="" type="video/webm">
    <source src="" type="video/ogg">

Let us see how we can add tracks to our video. Tracks are nothing but subtitles that will be displayed at the bottom of the video and is corresponding to the video being played. Below is how we can add tracks.

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="" srclang="en" default></track>

You can just navigate to the track source (src) to see format of the track file. Here's how it looks like. Isn't it meaningful and readable? The track file has cue which is nothing but a time interval; the start and end time which is separated by an arrow mark.

Note – The text within the cues can span through multiple lines and can also have include HTML.

Quote: Example reused from HTML5 Rocks video demo [2]


00:00:00.500 --> 00:00:02.000 D:vertical A:start
The Web is always changing

00:00:02.500 --> 00:00:04.300
and the way we access it is changing

00:00:05.000 --> 00:00:07.000
The source of that change is <c.highlight>you</c>

HTML5 Audio Tag

Now it's learn about HTML5 audio tag. We use <audio> element in HTML5 to represent a sound content in HTML document. All we need to do is set the source with the URL of the audio.

The HTML5 audio has a similar properties as that of a video tag.


Quote: The HTML5 Audio properties are based on [3]
  • controls – Shows up the audio controls that can be used to play/stop/pause the audio.
  • autoplay – The autoplay property lets the audio to be played automatically when the page gets loaded.
  • loop – When used repeats the music.
  • src – The source (URL) of the audio file.
  • preload – The preload can be set with one of the below values.
    • ?none - which means do not buffer the audio file automatically.
    • auto - buffers the audio file before it gets played.
    • metadata – buffers only the audio metadata.

Currently the recent browsers which are based on WebKit such as Chrome, Safari supports *.mp3 files. The audio format *.ogg is an open standard and is supported by most of the browsers except Microsoft IE.

Here's an example demonstrates the usage of audio tag

<html lang="en">
<meta charset=utf-8>
<title>HTML5 audio</title>
<audio controls="controls">
<source src="example.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.

Here's a real world example of the usage of audio tag. You can notice here we are using flash *.swf as a default fall back mechanism.

<audio id="AudioWithControls" controls="">
        <source src="" type="audio/mpeg">
        <source src="" type="audio/ogg">
        <object class="playerpreview" type="application/x-shockwave-flash" data="" width="200" height="20">
          <param name="movie" value="">
          <param name="bgcolor" value="#085c68">
          <param name="FlashVars" value="mp3=">
          <embed href="" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=">

Now let us see how to add tracks to our audio. Below is the example you can see the source language is English. You could have multiple tracks in multiple languages.

<!-- Audio playback with captions -->
<audio src="test.ogg">
  <track kind="captions" src="test.en.vtt" srclang="en" label="English">

CSS3 Text Effects (Outline, Shadow, Wrap, etc.)

CSS3 Outline

Let us learn about CSS3 outlines. The text-outline has a thinkness, blur and color values out of which blur is optional. An outline is defined as below.

outline: { [ outline-width ]   [ outline-style ]   [ outline-color ] | inherit } 

an outline is usually drawn outside of the border. Unlike border, the outline color and width cannot be set to individual edges around the element border. Also adding outlines will not cause any disturbance in the flow of the document and won't cause any overflow.

Example of an outline. In the below example an outline of 3px solid with orange color is drawn when the user focus an anchor (<a>) tag.

#outlineExample a:focus {
  outline: 3px solid orange;

If you wish to explicitly set the outline , here's how one can do.

# outlineExample a:focus {
  outline-color: orange;
  outline-width: 5 px;
  outline-style: solid;

Here's an example on how to apply outline

<!DOCTYPE html>
  font-size: 24px;
  background: orange;
#outlineExample  {
  outline-color: orange;
  outline-width: 5px;
  outline-style: solid;
<h1>Outline Example</h1>
<a id="outlineExample" href="">Welcome to CodeProject</a>

Note – The surrounding outline might look like border but it's not. Below is the modified style with border.

#outlineExample  {
  outline-color: orange;
  outline-width: 5px;
  outline-style: solid;
  border-width: 5px;
  border-color: red;

CSS3 Text shadows

Let us learn about text shadows by setting the appropriate value to text-shadow property. We will see how to create one with an example.

Here's how we can use. The below one creates a shadow with -2px horizontal offset , 2px vertical offset , blurs by 3px and applies orange red color.

    text-shadow: -2px 2px 3px #FF4040 ;

Here's a neon style were you can see below how it creates a glowing heading text.

    text-align: center;
    margin: 200px auto;
    font-family: "Museo";
    font-size: 150px;
    /* text-transform: uppercase; */
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
                 0 0 40px #FF6103, 0 0 70px #FF6103, 0 0 80px #FF6103,
                 0 0 100px #FF6103, 0 0 150px #FF6103;

When it comes to browser support, unfortunately IE 6, 7 and 8 don't have support for text-shadow.

CSS3 Word Wrapping

Let us now try to understand and set the word-wrap property to set the word wrapping say for a <p> paragraph tag. The word wrapping allows long words which are unbreakable to be broken down in to multiple lines.

Below is the word wrap syntax

word-wrap: normal|break-word|initial|inherit; 

Here's an example of word wrapping. Note we have some text with in the paragraph (<p>) but the paragraph is set with width as 400px and applied with various other styles but we are more interested in word wrapping. You can notice the words does not overflow but it breaks down that's because of this style word-wrap:break-word;

<!DOCTYPE html>
   background: orange;
    font-size: 24px;
    color: white;
    border:1px solid red;
<h2> Word Wrapping Example </h2>
<p class="wordwrap"> Each week's two winning article authors will take home a CodeProject Prize Pack that includes: a free 5-year Pro Account subscription to CodeProject Workspaces, a CodeProject t-shirt, and two vinyl, die cut Bob stickers.</p>

CSS3 Text Transformation

One can use text transformation value like uppercase and lowercase to transform a text to upper or lower case characters. Also you can use capitalize to make the first letter of each word in CAPS.

Here's the syntax for applying text transformation.

text-transform:  uppercase | lowercase | capitalize | none | inherit


    h2          { text-transform: capitalize }
    p.lowercase { text-transform: lowercase }
    p.none      { text-transform: none }
    p.uppercase { text-transform: uppercase }
    <h2>article 5: getting fancy with hTML5 & cSS3</h2> 
        <li><p class="uppercase">CSS3 Transitions</p></li>
        <li><p class="lowercase">CSS3 Animations</p></li>
        <li><p class="none">CSS3 Text Effects (Outline, Shadow, Wrap, etc.) </p></li>

Summary of CSS3 Text

We have seen how to apply CSS in changing the appearance of a text. The CSS allows us to do all sorts of things like changing the word wrapping, creating shadows, do text transformation, create outlines, border around the text.

In addition the above things, the CSS also provides other capabilities like controlling changing text direction, apply text decorations, indentation and alignment of texts, spacing between words and letters, align text and apply line breaking and much more.

CSS3 2D and 3D Transforms

The CSS3 Transformation allows us to transform an element to an extent such as scaling, rotating, translating and skewing.

Below is the official W3 Syntax for transformation

transform: method(value);

However, the browser vendors came up with their own version of transformation. In order to make the transformations compatible, we have to use the vendor prefix based transformation. 

 /* Chrome & Safari 3.2+ */  
-webkit-transform: method(value);

/* Internet Explorer 9.0+ */  
-ms-transform: method(value); 

/* Opera 10.5+ */  
-o-transform: method(value); 

/* Firefox 3.6+ */  
-moz-transform: method(value);

Now let us look into some of the transformation function available.

Translate – The translate function moves the element from it's current position (x, y) to new position as specified to the translate function. You may ecall the co-ordinate system that we studied in school.

Here's an example where we apply translation to a div which moves the element by x-axis by 50px and y-axis by -100px.

transform: translate(50px, -100px)

Rotate – The rotate function is used to rotate an element with an angle specified. We can specify the rotation amount by degrees or radians with a positive or negative value. The positive value is used to rotate an element clockwise and the negative value for counter clock wise.

Here's an example which rotates an element clockwise by 30deg.

transform: rotate(30deg)

Scale – The scale function is used to adjust the element by a specific factor. The scale function takes one or two parameters. If you are specifying one value, the element gets scaled equally both horizontally and vertically axes. When you are specifying two values, the elements horizontal and vertical axes gets scaled separately.

Here's an example which scales an element 3 by horizontal axes and 3 by vertical axes.

transform: scale(3, 3) 

Let us learn with an example to understand how to perform scaling. The below sample scales the div containing image by 3 times.

Skew – The skew function is used to stretch an element. It takes two parameters one to stretch with an angle in x axes and the other in y axes.

Here's an example for skewing. We skew the div containing bob image by 30deg stretch by x and y axis.

Dealing with the vendor prefix styles in CSS3

As you might have noticed one thing, we need to apply CSS3 styles specific to the browser vendor. What we usually do is duplicate styles with vendor prefix so this lets the specific style to be applied based on the browser you are viewing the document.

Now we will deal with avoiding the vendor prefixes while applying CSS3D styles. In order for the styles to work without vendor prefix , we will be making use of a small javascript library named prefixfree.js. It's a light weight 2KB JS framework you can download and include in your HTML document.

With prefix free we need to have to worry about the vendor prefix but instead we will let the prefix free framework to handle or apply vendor specific properties at runtime. The prefix free
works behind the scenes by adding the current browser’s prefix to any CSS code, only when it’s needed.

Here's the sample example , deals with the below style. You can notice here we have used transform and animation. We will make use of prefix free to add vendor specific styles while we are viewing in browser.

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: initial;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(25deg);
   animation: rotate;
   cursor: zoom-in;

  transform: rotate(720deg);

Here's how we use the styles in HTML document body.


<a href="" class="download" title="Click to download" download="prefixfree.min.js">Download prefixfree only <strong>2KB</strong>gzipped</a>


If you are saving and viewing this document in Google Chrome, you will notice the download style will be altered with vendor prefix tag as below



Now it's the time to learn CSS 3D. The 3D transformation will make use of a similar functions as that of 2D. Below is the list of functions that we need to know in order to play with CSS 3D.

Before diving in let us understand the basics of 3D. With 2D you are aware of the X and Y , that's the horizontal and vertical dimensions. With 3D in addition to the X and Y we have the Z axes.

  • rotateX(angle) – The rotateX function takes a single parameter i.e an angle to rotate an element along the x axes.
  • rotateY(angle) – The rotateY function takes a single parameter i.e an angle to rotate an element along the y axes.
  • rotateZ(angle) – The rotateZ function takes a single parameter i.e an angle to rotate an element along the z axes.
  • translateZ(tz) – The translateZ function specifies the translation by a given amount in z direction.
  • scaleZ(sz) – The scalez function is used tp scale an element in z direction.

Here's an example for scaling and rotation of an element.

Below are the styles that we will be making use of. You can notice the element is applied with a default 90deg transformation along the Y axes.

@import url(;

body {
  margin-top: 50px;
  overflow: hidden;
  font-family: Source Sans Pro;
  perspective: 400px;
  background: orange;

#element {
  box-sizing: border-box;
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  background: gray;
  border: 3px solid #444444;
  margin: 0 auto;
  transform: rotateY(90deg);

.slider, #label {
  position: relative;
.slider input, #css input {
  vertical-align: middle;

Here's the HTML code snippet where we are making use of the above styles to achieve transformation.

<div id='element'></div>
<div class='slider'>
  <input id='zslider' max='2.5' min='' step='0.1' type='range' value='1'>
<div id='label'>Transform: ScaleZ(1)</div>

We will be using javascript code to update the scaling for our element. In the on change event of the slider we will scale the element and update the inner text of the div with id - label.

var element  = document.getElementById('element'),
    css = document.getElementById('label'),
    z   = 1;

document.getElementById('zslider').addEventListener('change', function() {
  z = this.value;
}, false);

function updateElement() {
  var scale = 'scaleZ(' + z + ')';[Modernizr.prefixed('transform')] = scale + ' rotateY(60deg)';
  label.innerText = 'transform: ' + scale;

CSS3 Transitions

The CSS3 transitions are effects that allows the element to change it's style gradually. In order to see the effect of the transition , you will always have to specify a duration.

Here's an example of a CSS transition. You can notice on mouse hover of bob image, the width gets changed and the transition will also be applied.

<!DOCTYPE html>
    -webkit-transition:width 2s; 
    transition:width 2s;

<img src="" />


Now let us see the properties of transition. (Please note, some of the definitions are based on w3schools[4]

  • transition – The transition is a single property which can be used to set all the transition effects. All of the below transition based properties can be set using this one property.
  • transition-delay – The transition delay specifies the delay with which the transition effect has to happen.
  • transition-duration – The transition duration specifies how many seconds or milliseconds a transition effect takes to complete. 
  • transition-property – The transition property can be used to specify the name of the CSS property that you wish to perform a transition effect. ex: width
  • transition-timing-function – The transition timing function is used to specify the speed curve of the transition effect.  This property is resposibile for changing or altering the speed of transition. You can set this property with the following values - linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(),initial,inherit

Little more about transition with transformation. Here's an example you can see the transformation (180deg rotation) is being applied when we mouse hover the bob image.


Here's another example of the usage of transaction with timing function , duration etc. You can see on mouse hover the menu, the background color gets changed to white with a little 1 second delay and a box shadow is also being applied.

CSS3 Animations

Now let us learn about CSS3 Animations. The CSS3 animation allows us to apply animations with the help of animation property.

There are two main components that we must know before we get started with animations. That is, we must first define the styles that are required for the animation and specify the keyframe which indicates the start and end states of the animation styles.

The @keyframes rule is the base for animation. We can apply various styles during the animation. Within the keyframe we can either specify the from and to and/or we can explicitly specify the change to happen in percentage. 0% is the beginning of the animation and 100% is when the animation completes.

Note the @keyframe is only supported in Internet Explorer 10, Firefox, and Opera. For Safari and Chrome support we will have to define @-webkit-keyframes rule.

Below is an example of how we can define a keyframe rule with from and to.

@keyframes move
   from {top:0px;}
   to   {top:500px;}

@-webkit-keyframes move 
   from {top:0px;}
   to {top:500px;}

Now we shall define animation which makes use of the keyframe rule.

animation:move 2s infinite;
-webkit-animation:move 2s infinite; 

Let us now learn how to define a keyframe rule with percentages. If you want to have a better control over the keyframes and wish to build animations to be controlled in a specific percentages it's always good to go with the below approach.

Note you can mix and match the percentage with from and to animations too.

@keyframes move
   0%   {top:0px; left:0px; background:orange;}
   25%  {top:0px; left:100px; background:red;}
   50%  {top:100px; left:100px; background:blue;}
   75%  {top:100px; left:0px; background:green;}
   100% {top:0px; left:0px; background:yellow;}

@-webkit-keyframes move 
   0%   {top:0px; left:0px; background:orange;}
   25%  {top:0px; left:100px; background:red;}
   50%  {top:100px; left:100px; background:blue;}
   75%  {top:100px; left:0px; background:green;}
   100% {top:0px; left:0px; background:yellow;}

Let us now learn the properties that's required to apply animations.

Quote: The following CSS3 Animation propeties are based on [5]
  • animation-delay – The animation delay is used to specify the delay between the time the element is loaded and the beginning of the animation sequence.
  • animation-direction – Specifies whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
  • animation-duration – The animation duration is used to specify the length of time that an animation should take to complete one cycle.
  • animation-iteration-count – Used to specify the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
  • animation-name - The animation name specifies the name of the @keyframes at-rule describing the animation's keyframes.
  • animation-play-state – The animation play state property basically helps in pausing and resuming the animation sequence.
  • animation-timing-function – Specifies the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
  • animation-fill-mode – Lets us to specify a values that can be applied before and after animation.

Let us see the cube animation example in steps.

Please note - The below cube example is based on the common creative license created by David DeSandro More info, please take a look into -

1. First thing to do is defining the keyframe

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

2. Second is defining animations. Note , we have specified animation with infinite so the cube rotates by itself forever. Also notice the effect ease-in-out which specifies a transition effect with a slow start and end.

#cube.spinning {
   -webkit-animation: spinCubeWebkit 8s infinite ease-in-out;
      -moz-animation: spinCubeMoz    8s infinite ease-in-out;
        -o-animation: spinCubeO      8s infinite ease-in-out;
           animation: spinCube       8s infinite ease-in-out;

3. We will define the cube as below. We need to specify the transform-style with preserve-3d so that the elements children that is the edges are positioned in the 3D Space.

Note – If you are running the cube sample in say IE 10 , currently it does not support preserve-3d. The only workaround for now is to manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

  <section class="container">
    <div id="cube" class="spinning">
      <p class="front"></p>
      <p class="back"></p>
      <p class="right"></p>
      <p class="left"></p>
      <p class="top"></p>
      <p class="bottom"></p>

#cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform: translateZ( -100px );
         -moz-transform: translateZ( -100px );
           -o-transform: translateZ( -100px );
              transform: translateZ( -100px );

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

4. We will apply rotation and translation on each edges of the cube.

#cube .front  {
      -webkit-transform: translateZ( 100px );
         -moz-transform: translateZ( 100px );
           -o-transform: translateZ( 100px );
              transform: translateZ( 100px );

    #cube .back {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
         -moz-transform: rotateX( -180deg ) translateZ( 100px );
           -o-transform: rotateX( -180deg ) translateZ( 100px );
              transform: rotateX( -180deg ) translateZ( 100px );

    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
         -moz-transform: rotateY(   90deg ) translateZ( 100px );
           -o-transform: rotateY(   90deg ) translateZ( 100px );
              transform: rotateY(   90deg ) translateZ( 100px );

    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
         -moz-transform: rotateY(  -90deg ) translateZ( 100px );
           -o-transform: rotateY(  -90deg ) translateZ( 100px );
              transform: rotateY(  -90deg ) translateZ( 100px );

    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
         -moz-transform: rotateX(   90deg ) translateZ( 100px );
           -o-transform: rotateX(   90deg ) translateZ( 100px );
              transform: rotateX(   90deg ) translateZ( 100px );

    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
         -moz-transform: rotateX(  -90deg ) translateZ( 100px );
           -o-transform: rotateX(  -90deg ) translateZ( 100px );
              transform: rotateX(  -90deg ) translateZ( 100px );

Now we will see a real world example of a 2D and 3D Transformations applied for div buttons.

First let us define the styles that are required for this sample.

.button-skewed-danger {
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  text-transform: uppercase;
  width: 150px;
  margin: 30px auto;
  position: relative;
  color: white;
  font-weight: bold;
  line-height: 2.4;
  text-align: center;
  padding-left: 20px;
  cursor: pointer;
  outline: 1px solid transparent;
  -webkit-transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
  -ms-transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);
  transform: skew(-9deg) rotateX(-22deg) rotateY(-31deg) rotateZ(-9deg);

.button-skewed-action {
  background: #5388C6;
 -webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */
-ms-transform:matrix(1,0.1,-0.5,1,0,0); /* IE 9 */
-webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */

.button-skewed-action:hover {
  background: #3C87DD;

.button-skewed-success {
  background: #7fc552;

.button-skewed-success:hover {
  background: #7CD147;

.button-skewed-warning {
  background: #C6C000;
-webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */
-ms-transform:matrix(1,0.1,-0.5,1,0,0); /* IE 9 */
-webkit-transform:matrix(1,0.1,-0.5,1,0,0); /* Chrome, Safari, Opera */

.button-skewed-warning:hover {
  background: #B3AE14;

.button-skewed-danger {
  background: #C66253;

.button-skewed-danger:hover {
  background: #DD513C;

We shall apply the above styles to in HTML.

<h4 align="center">CodeProject Skewed Buttons </h4>
<div class="button-skewed-success">Submit</div>
<div class="button-skewed-action">Action</div>
<div class="button-skewed-warning">Warning</div>
<div class="button-skewed-danger">Danger</div>

Let us see one more example demonstating the usage of transition and 3D Rotation to flip the image.

Here are the styles that is required for our code sample. You can notice the transition with 1s is being applied for the card and we are rotating the card by 180 deg to make the card to flip effect.

  font-size: 25px;
.container {
      width: 400px;
      height: 250px;
      margin: 0 auto 40px;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;

    #card {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;

    #card.flipped {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );

    #card figure {
      display: block;
      height: 100%;
      width: 100%;
      color: white;
      text-align: center;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;

    #card .front {
      background: red;

    #card .back {
      background: blue;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );

Let us code the HTML document and apply the above styles.

  <script src=""></script>

<h2>Flip Image Example</h2>
<section class="container"> 
    <div id="card"> 
    <figure class="front">
     <img src="" alt="The Pulpit Rock" width="304" height="228">
    <figure class="back">
        <img src="" alt="The Pulpit Rock" width="304" height="228">          
</div> </section> 
<a id="card" href="#">Flip</a>

Points of Interest

Initially, I knew little about CSS3 but when started researching about CSS3, the capabilites that's being provided by modern browser to support CSS3 is tremendious. I really enjoyed playing with HTML5 Video/Audio tags, CSS3 animations, transitions etc. You might be supripsed to see the animations is being implemented with a minimal CSS3 code and no javascripts.

Special thanks to editor, without that I would not be able to comeup with a proffesional code intereative samples :)

Don't forget to download and view the sample source code. It has 15 samples demostrating the use of HTML5 and CSS3.








Version 1.0 - Created Getting Fancy with HTML5 & CSS3 article - 04/12/2014

Version 1.1 - Updated article with the appropriate references - 09/08/2015


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
United States United States

Around 10 years of professional software development experience in analysis, design, development, testing and implementation of enterprise web applications for healthcare domain with good exposure to object-oriented design, software architectures, design patterns, test-driven development and agile practices.

In Brief

Analyse and create High Level , Detailed Design documents.
Use UML Modelling and create Use Cases , Class Diagram , Component Model , Deployment Diagram, Sequence Diagram in HLD.

Area of Working : Dedicated to Microsoft .NET Technologies
Experience with : C# , J2EE , J2ME, Windows Phone 8, Windows Store App
Proficient in: C# , XML , XHTML, XML, HTML5, Javascript, Jquery, CSS, SQL, LINQ, EF

Software Development

Database: Microsoft SQL Server, FoxPro
Development Frameworks: Microsoft .NET 1.1, 2.0, 3.5, 4.5
UI: Windows Forms, Windows Presentation Foundation, ASP.NET Web Forms and ASP.NET MVC3, MVC4
Coding: WinForm , Web Development, Windows Phone, WinRT Programming, WCF, WebAPI

Healthcare Domain Experience

CCD, CCR, QRDA, HIE, HL7 V3, Healthcare Interoperability


B.E (Computer Science)

CodeProject Contest So Far:

1. Windows Azure Developer Contest - HealthReunion - A Windows Azure based healthcare product , link -

2. DnB Developer Contest - DNB Business Lookup and Analytics , link -

3. Intel Ultrabook Contest - Journey from development, code signing to publishing my App to Intel AppUp , link -

4. Intel App Innovation Contest 2013 - eHealthCare

5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Contest 2014

6. Grand Prize Winner of CodeProject Android Article Contest 2014

7. Grand Prize Winner of IOT on Azure Contest 2015

You may also be interested in...

Comments and Discussions

GeneralLooks like a beast of an article... Pin
Kevin Priddle14-Apr-14 8:04
staffKevin Priddle14-Apr-14 8:04 
GeneralRe: Looks like a beast of an article... Pin
Ranjan.D14-Apr-14 9:57
mvpRanjan.D14-Apr-14 9:57 
GeneralMy vote of 5 Pin
Guruprasad.kb13-Apr-14 4:51
memberGuruprasad.kb13-Apr-14 4:51 
GeneralRe: My vote of 5 Pin
Ranjan.D13-Apr-14 6:24
mvpRanjan.D13-Apr-14 6:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 9 Sep 2015
Article Copyright 2015 by Ranjan.D
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid