LEARNING OBJECTIVES
The CSS transform property allows you to rotate, move, scale, and skew HTML elements on a webpage. Learn how to apply the rotate, translate, scale, and skew functions to modify the appearance and positioning of elements. Explore examples of rotating images and divs using CSS transforms to enhance your web design skills.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
LEARNING OBJECTIVES How to use the transform property rotate function to rotate an HTML element on a page How to use the transform property translate function to move an HTML element on a page How to use the transform property scale function to increase or decrease the size of an HTML element on a page How to use the transform property skew function to skew an HTML element on a page along the object s x or y axis
CSS TRANSFORM PROPERTY The CSS transform property provides several functions you can use with CSS styles to translate or move, rotate, skew, or scale an HTML element. Depending on your browser, the name of the transform property may differ: - -moz moz- -transform: transform: - -ms ms- -transform: transform: - -o o- -transform: transform: - -webkit webkit- -transform: transform: transform: transform:
ROTATING AN IMAGE <! <!DOCTYPE html> DOCTYPE html> <html> <html> <head> <head> <style type="text/ <style type="text/css css"> "> .right { .right { - -moz moz- -transform: rotate(345deg); transform: rotate(345deg); - -ms ms- -transform: rotate(345deg); transform: rotate(345deg); - -o o- -transform: rotate(345deg); transform: rotate(345deg); - -webkit webkit- -transform: rotate(345deg); transform: rotate(345deg); transform: rotate(345deg); transform: rotate(345deg); } } .left { .left { - -moz moz- -transform: rotate(15deg); transform: rotate(15deg); - -ms ms- -transform: rotate(15deg); transform: rotate(15deg); - -o o- -transform: rotate(15deg); transform: rotate(15deg); - -webkit webkit- -transform: rotate(15deg); transform: rotate(15deg); transform: rotate(15deg); transform: rotate(15deg); } } </style> </style> </head> </head> <body> <body> < <img img class="left" width="300" height="200" class="left" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/dog.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/dog.jpg" /> < <img img class="right" width="300" height="200" class="right" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/wine.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/wine.jpg" /> < <br br/> /> < <img img class="left" width="300" height="200" class="left" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/cat.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/cat.jpg" /> < <img img class="right" width="300" height="200" class="right" width="300" height="200" src </body> </body> </html> </html> src="http://www.websitedevelopmentbook.com/Chapter23/cigar.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/cigar.jpg" />
ROTATING DIVS (TEXT AND IMAGES) <! <!DOCTYPE html> DOCTYPE html> < <html> html> <head> <head> <style type="text/ <style type="text/css css"> "> .right { .right { - -moz moz- -transform: rotate(345deg); transform: rotate(345deg); - -ms ms- -transform: rotate(345deg); transform: rotate(345deg); - -o o- -transform: rotate(345deg); transform: rotate(345deg); - -webkit webkit- -transform: rotate(345deg); transform: rotate(345deg); transform: rotate(345deg); transform: rotate(345deg); float:right float:right; ; } } .left { .left { - -moz moz- -transform: rotate(15deg); transform: rotate(15deg); - -ms ms- -transform: rotate(15deg); transform: rotate(15deg); - -o o- -transform: rotate(15deg); transform: rotate(15deg); - -webkit webkit- -transform: rotate(15deg); transform: rotate(15deg); transform: rotate(15deg); transform: rotate(15deg); float:left float:left; ; } } h1 { h1 { text </style> </style> </head> </head> <body> <body> <div class="left" style="width:300px; height:300px; background <div class="left" style="width:300px; height:300px; background- -color: blue;"> < <img imgwidth="300" height="200" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/dog.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/dog.jpg" /> <h1>Dogs Rule</h1> <h1>Dogs Rule</h1> </div> </div> <div class="right" style="width:300px; height:300px; background <div class="right" style="width:300px; height:300px; background- -color: red;"> < <img imgwidth="300" height="200" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/wine.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/wine.jpg" /> <h1> <h1>Cheeers Cheeers!</h1> !</h1> </div> </div> <div style=" <div style="clear:both clear:both;"></div> ;"></div> < <br br/> /> <div class="left" style="width:300px; height:300px; background <div class="left" style="width:300px; height:300px; background- -color: green;"> < <img imgwidth="300" height="200" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/cat.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/cat.jpg" /> <h1>Meow!</h1> <h1>Meow!</h1> </div> </div> <div class="right" style="width:300px; height:300px; background <div class="right" style="width:300px; height:300px; background- -color: yellow < <img imgwidth="300" height="200" width="300" height="200" src src="http://www.websitedevelopmentbook.com/Chapter23/cigar.jpg" /> ="http://www.websitedevelopmentbook.com/Chapter23/cigar.jpg" /> <h1>Relax!</h1> <h1>Relax!</h1> <div> <div> </body> </body> </html> </html> text- -align:center align:center; } ; } color: blue;"> color: red;"> color: green;"> color: yellow;"> ;">
SPINNING AN OBJECT WITH CSS AND JAVASCRIPT <! <!DOCTYPE html> DOCTYPE html> <html> <html> <head> <head> <script> <script> var var i i = 0; = 0; function function SpinImage SpinImage() () { { document.getElementById document.getElementById("body"). '< '<img img ' + ' + 'style=" 'style="- -moz moz- -transform: rotate(' + transform: rotate(' + i i + ' ''- -ms ms- -transform: rotate(' + transform: rotate(' + i i + ' ''- -o o- -transform: rotate(' + transform: rotate(' + i i + ' ''- -webkit webkit- -transform: rotate(' + transform: rotate(' + i i + ' 'transform: rotate(' + 'transform: rotate(' + i i + ' ''src src="http://www.websitedevelopmentbook.com/chapter23/spiral.jpg">'; ="http://www.websitedevelopmentbook.com/chapter23/spiral.jpg">'; i i = = i i + 1; + 1; } } </script> </script> </head> </head> <body id="body" <body id="body" onload onload=" ="setInterval setInterval(function() { (function() { SpinImage </body> </body> </html> </html> ("body").innerHTML innerHTML = = + 'deg deg); ' + deg); ' + ); ' + + 'deg deg); ' + ); ' + + 'deg deg); ' + + 'deg deg); "' + ); "' + ); ' + + 'deg ); ' + SpinImage(); }, 25)"> (); }, 25)">
SCALING AN OBJECT <! <!DOCTYPE html> DOCTYPE html> <html> <html> <head> <head> <script> <script> vari vari = 1.0; = 1.0; var var direction = 'Grow'; direction = 'Grow'; function function GrowAndShrink GrowAndShrink() { document.getElementById document.getElementById("body"). '< '<img img ' + ' + 'style=" 'style="- -moz moz- -transform: scale(' + transform: scale(' + i i + ', ' + ''- -ms ms- -transform: scale(' + transform: scale(' + i i + ', ' + ''- -o o- -transform: scale(' + transform: scale(' + i i + ', ' + ''- -webkit webkit- -transform: scale(' + transform: scale(' + i i + ', ' + 'transform: scale(' + 'transform: scale(' + i i + ', ' + ''src src="http://www.websitedevelopmentbook.com/chapter23/spiral.jpg">'; ="http://www.websitedevelopmentbook.com/chapter23/spiral.jpg">'; () { ("body").innerHTML innerHTML = = + ', ' + i i + '); ' + + '); ' + + '); ' + + ', ' + i i + '); ' + + '); ' + + ', ' + i i + '); "' + + '); "' + + '); ' + + ', ' + i i + '); ' + + ', ' + i i + '); ' + if (direction == 'Grow') if (direction == 'Grow') i i = = i i + 0.25; + 0.25; else else i i = = i i - - 0.25; 0.25; if ( if (i i == 1.0) == 1.0) direction = 'Grow'; direction = 'Grow'; else if ( else if (i i == 2.0) == 2.0) direction = 'Shrink'; direction = 'Shrink'; } } </script> </script> </head> </head> <body id="body" <body id="body" onload </body> </body> </html> </html> onload=" ="setInterval setInterval(function() { (function() { GrowAndShrink GrowAndShrink(); }, 500)"> (); }, 500)">
FLIPPING AN OBJECT <! <!DOCTYPE html> DOCTYPE html> <html> <html> <head> <head> <style> <style> .flip { .flip { - -moz moz- -transform: transform: scaleY - -ms ms- -transform: transform: scaleY - -o o- -transform: transform: scaleY - -webkit webkit- -transform: transform: scaleY transform: transform: scaleY scaleY( (- -1); } } </style> </style> </head> </head> <body> <body> < <imgsrc imgsrc="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> ="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> < <img img src src="http://www.websitedevelopmentbook.com/chapter23/cat.jpg"><br/> ="http://www.websitedevelopmentbook.com/chapter23/cat.jpg"><br/> < <img img class="flip" class="flip" src src="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> ="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> < <img img class="flip" class="flip" src src="http://www.websitedevelopmentbook.com/chapter23/cat.jpg"><br/> ="http://www.websitedevelopmentbook.com/chapter23/cat.jpg"><br/> </body> </body> </html> </html> scaleY( (- -1); scaleY( (- -1); scaleY( (- -1); scaleY( (- -1); 1); 1); 1); 1); 1);
SKEWING AN OBJECT <! <!DOCTYPE html> DOCTYPE html> <html> <html> <head> <head> <style> <style> .skew15 { .skew15 { - -moz moz- -transform: transform: skewY - -ms ms- -transform: transform: skewY - -o o- -transform: transform: skewY - -webkit webkit- -transform: transform: skewY transform: transform: skewY skewY(15deg); } } skewY(15deg); (15deg); skewY(15deg); (15deg); skewY(15deg); (15deg); skewY(15deg); (15deg); (15deg); .skew30 { .skew30 { - -moz moz- -transform: transform: skewY - -ms ms- -transform: transform: skewY - -o o- -transform: transform: skewY - -webkit webkit- -transform: transform: skewY transform: transform: skewY skewY(30deg); } } skewY(30deg); (30deg); skewY(30deg); (30deg); skewY(30deg); (30deg); skewY(30deg); (30deg); (30deg); .skew45 { .skew45 { - -moz moz- -transform: transform: skewY - -ms ms- -transform: transform: skewY - -o o- -transform: transform: skewY - -webkit webkit- -transform: transform: skewY transform: transform: skewY skewY(45deg); } } skewY(45deg); (45deg); skewY(45deg); (45deg); skewY(45deg); (45deg); skewY(45deg); (45deg); (45deg); .skew60 { .skew60 { - -moz moz- -transform: transform: skewY - -ms ms- -transform: transform: skewY - -o o- -transform: transform: skewY - -webkit webkit- -transform: transform: skewY transform: transform: skewY skewY(60deg); } } skewY(60deg); (60deg); skewY(60deg); (60deg); skewY(60deg); (60deg); skewY(60deg); (60deg); (60deg); </style> </style> </head> </head> <body> <body> < <img imgclass="skew15" class="skew15" src < <img imgclass="skew30" class="skew30" src < <img imgclass="skew45" class="skew45" src < <img imgclass="skew60" class="skew60" src </body> </body> </html> </html> src="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> ="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> src="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"><br/> ="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"><br/> src="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> ="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"> src="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"><br/> ="http://www.websitedevelopmentbook.com/chapter23/dog.jpg"><br/>
SUMMARY Using JavaScript, CSS, and JQuery, you have learned a variety of ways to manipulate HTML elements on a page. In this chapter, you examine ways to perform text and image translations rotations using CSS as well as scaling and skewing operations.
