Click here to Skip to main content
Click here to Skip to main content

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

, 12 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
All about CSS3 Text Effects, Animations, Transformations and few HTML5 Tags

Introduction

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 codepen.io 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.

Background

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.   
</video>  

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

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

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

Also there are cases where the browser supports video element but it may not support the video format and in such cases it's always good to add multiple formats of same video so that 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"/>
    </object>  
</video>  

Now let us see the video element properties.

  • 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 is a royalty fee an is supported by Firefox 3.5, Chrome 4, Opera 10.5. The VP8 or WebM 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="TestMovie_H264.mov" />
    <source src="TestMovie_Ogg.ogv" />
    <source src="TestMovie_WebM.webm" />
</video>

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.

<video preload="metadata" controls> 
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
    <source src="http://html5demos.com/assets/dizzy.webm" type="video/webm">
    <source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg">
</video> 



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="http://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/tracks/developerStories-subtitles-en.vtt" srclang="en" default></track>
 </video>

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 very easy to read ? 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.

WEBVTT FILE

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

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

3
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.
  • controls – Shows up the audio controls so that can be used to play/pause etc.
  • 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.
  1. none - which means do not buffer the audio file automatically.
  2. auto - buffers the audio file before it gets played.
  3. 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 audio</title>
</head>
<body>
<audio controls="controls">
<source src="example.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
</audio>
</body>
</html>
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="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg">
        <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg">
        <object class="playerpreview" type="application/x-shockwave-flash" data="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf" width="200" height="20">
          <param name="movie" value="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf">
          <param name="bgcolor" value="#085c68">
          <param name="FlashVars" value="mp3=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3">
          <embed href="http://www.html5rocks.com/en/tutorials/audio/quick/player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3">
        </object>
      </audio> 
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">
</audio> 


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 won't disturb 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>
<html>
<style>
body{
  font-size: 24px;
  background: orange;
}
#outlineExample  {
  outline-color: orange;
  outline-width: 5px;
  outline-style: solid;
}
</style>
<body>
<h1>Outline Example</h1>
<a id="outlineExample" href="http://codeproject.com">Welcome to CodeProject</a>
</body>
</html>


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;
  border-style:solid;
} 



CSS3 Text shadows

Let us learn about text shadows. 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.

h1 
{
    text-shadow: -2px 2px 3px #FF4040 ;
} 

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

#neon  
{
    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 make use of word wrapping. The word wrapping allows long words which are unbreakable to be broken down in to multiple lines.

Word wrap syntax

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

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 over flow but it breaks down that's because of this style word-wrap:break-word;

<!DOCTYPE html>
<html>
<head>
<style> 
body{
   background: orange;
}
p.wordwrap
{
width:400px; 
font-size: 24px;
color: white;
border:1px solid red;
word-wrap:break-word;
}
</style>
</head>
<body>
<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>
</body>
</html>  



CSS3 Text Transformation

One can use text transformation value like uppercase and lowercase in order 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

Example

<html>
<head>
    h2          { text-transform: capitalize }
    p.lowercase { text-transform: lowercase }
    p.none      { text-transform: none }
    p.uppercase { text-transform: uppercase }
</head>
<body>
    <h2>article 5: getting fancy with hTML5 & cSS3</h2> 
    <ul>
        <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>
    </ul>
</body>
</html>


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 to all these 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.

The official W3 Syntax for transformation is as below

transform: method(value); 

However the browser vendors came up with their own version of transformation and currently we need to make use of these versions in order to make the transformations compatible. You can notice below the vendor prefix for the 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 in the translate. Recall the co-ordinate system that we all 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 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 {
   margin-left:100px;
   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;
}

.download:hover{
  border-radius:70px;
  transform: rotate(720deg);
  background-color:orange;
}

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

<body>

<a href="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" class="download" title="Click to download" download="prefixfree.min.js">Download prefixfree only <strong>2KB</strong>gzipped</a>

</body>

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

-webkit-transform:rotate(25deg);
-webkit-animation:rotate;



CSS 3D

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) – Rotates the element along the x axes.
  • rotateY(angle) – Rotates the element along the y axes.
  • rotateZ(angle) – Rotates the element along the z axes.
  • translateZ(tz) – Specifies the translation by a given amount in z direction.
  • scaleZ(sz) – Scales the element in the 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(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);

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'>
  <label>Z:</label>
  <input id='zslider' max='2.5' min='' step='0.1' type='range' value='1'>
</div>
<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;
  updateElement();
}, false);

function updateElement() {
  var scale = 'scaleZ(' + z + ')';
  element.style[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. The transition always requires a duration in order for to see it's effect.

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>
<html>
<head>
<style> 
img
{
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:width 2s; 
    transition:width 2s;
}
img:hover
{
width:300px;
}
</style>
</head>
<body>

<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" />

</body>
</html> 

Now let us see the properties of transition.

  • transition – A shorthand property for setting the transition using a single property.
  • transition-delay – Used to specify when the transition effect will start.
  • transition-duration – Used to specify how many seconds or milliseconds a transition effect takes to complete.
  • transition-property – Used to specify the name of the CSS property the transition effect is for.
  • transition-timing-function – Used to specify the speed curve of the transition effect.

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.

  • animation-delay – 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 – 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 - Specifies the name of the @keyframes at-rule describing the animation's keyframes.
  • animation-play-state – 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.

Now we will see with a cube animation example in steps.

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>
    </div>
  </section>

#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-action,
.button-skewed-success,
.button-skewed-warning,
.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 */
transform:matrix(1,0.1,-0.5,1,0,0);
}

.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 */
transform:matrix(1,0.1,-0.5,1,0,0);
}

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

body{
  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.

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<h2>Flip Image Example</h2>
<section class="container"> 
    <div id="card"> 
    <figure class="front">
     <img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="The Pulpit Rock" width="304" height="228">
    </figure>
    <figure class="back">
        <img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="The Pulpit Rock" width="304" height="228">          
    </figure> 
</div> </section> 
<a id="card" href="#">Flip</a>


Points of Interest

Initially I knew little about CSS3 but when I was researching about CSS3, the capabilites that's being provided by modern browser to support CSS3 is tremendious. I really felt an easy in understanding and developing sample code. 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 codepen.io editor , without that I would not be able to comeup with a proffesional code intereative samples Smile | :)

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

History

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

License

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

Share

About the Author

Ranjan.D
Web Developer
United States United States
Profile
 
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
 
Others:
 
TTD, BDD
 
Education
 
B.E (Computer Science)
 
CodeProject Contest So Far:
 
1. Windows Azure Developer Contest - HealthReunion - A Windows Azure based healthcare product , link - http://www.codeproject.com/Articles/582535/HealthReunion-A-Windows-Azure-based-healthcare-pro
 
2. DnB Developer Contest - DNB Business Lookup and Analytics , link - http://www.codeproject.com/Articles/618344/DNB-Business-Lookup-and-Analytics
 
3. Intel Ultrabook Contest - Journey from development, code signing to publishing my App to Intel AppUp , link - http://www.codeproject.com/Articles/517482/Journey-from-development-code-signing-to-publishin
 
4. Intel App Innovation Contest 2013 - eHealthCare - http://www.codeproject.com/Articles/635815/eHealthCare
 
5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Contest 2014
 
6. Grand Prize Winner of CodeProject Android Article Contest 2014

Comments and Discussions

 
GeneralLooks like a beast of an article... PinstaffKevin Priddle14-Apr-14 9:04 
GeneralRe: Looks like a beast of an article... PinmvpRanjan.D14-Apr-14 10:57 
GeneralMy vote of 5 PinmemberGuruprasad.kb13-Apr-14 5:51 
GeneralRe: My vote of 5 PinmvpRanjan.D13-Apr-14 7:24 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150326.1 | Last Updated 12 Apr 2014
Article Copyright 2014 by Ranjan.D
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid