Introduction

This is a simple application for beginners that shows how to create a rotation of a title on a web page using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a rotation of a title on a web page application. We know that HTML is HyperText Markup Language and is used to display data on a browser. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed.
Step 1: First Open an HTML editor such as Notepad.
notepad.gif
Step 2: Create a Folder on a desktop.
folder.gif
Step 3: Open Visual Studio.
new application.gif
openapplication.gif
Step 4: Add an HTML file to your web application.
html.gif
Step 5: Create an onload function that is used to set a color, height, width and rotation angle of a title.
Code :
  1. window.onload = function ()
  2. {
  3. var M = ctx("holder", 1240, 480),
  4. fonts = [0, M.getFont("1"), M.getFont("2"), M.getFont("3"), M.getFont("Arial Black")],
  5. rax = M.print(20, 240, "CShorpCorner", fonts[4], 120).attr({ fill: "#00ff99" })
  6. NUMBERS = [
  7. M.print(800, 380, "3", fonts[3], 180).attr({ fill: "#00ff99" }),
  8. ], times = 3;
  9. for (var i = 0, ii =rax.length; i < ii; i++) {
  10. rax[i].animate({ fill: ctx.getColor() }, 2000);
  11. }
Step 6: Add one CSS file named design.css that is used to set the properties of a body.
Code
  1. body {
  2. background: #fff;
  3. color: Fuchsiafont: 100.1% "Lucida Grande", Lucida, Verdana, sans-serif;
  4. }
  5. #holder {
  6. height: 500px;
  7. left: 100%;
  8. margin: 0 0 0 -420px;
  9. position: fixed;
  10. top: 0;
  11. width: 640px;
  12. }
  13. #copy {
  14. bottom: 0;
  15. font-size: .7em;
  16. position: fixed;
  17. right: 1em;
  18. text-align: right;
  19. }
Step 7: Now some CSS and js files are used in the application.
Code
  1. < link rel = "stylesheet"
  2. href = "design1.css"
  3. media = "screen" / ><
  4. script type = "text/jscript"
  5. src = "Scripts/Work.js" >< /script><
  6. script type = "text/javascript"
  7. src = "Scripts/fontstyle.js" >< /script>
Step 8: Set the animation properties that are used for visualization of a font.
Code
  1. NUMBERS[0].animate({ fill: ctx.getColor() }, 2000);
  2. NUMBERS[1].animate({ fill: ctx.getColor() }, 2000);
  3. NUMBERS[2].animate({ fill: ctx.getColor() }, 2000,
  4. function ()
  5. {
  6. rax.animate({ transform: "...r360" }, 1000);
  7. }
Step 9: Press Ctrl + F5 to run the code in a browser.
Output :
out1.gif
out2.gif
out4.gif
Resource
Here are some useful resources: