Computer Science 3

• The transform property in CSS3 can be applied in both 2D and 3D transformations.
• A 2D transformation and 3D transformation happens when a mouse hovers on an element.
• The transform property allows you to manipulate an element to add visual effects such as skew, rotate, translate, or scale.
• The possible values of the transform property include different transformation methods such as rotate(), scale(), skew(), translate(), matrix() and others.
• The translate() method in CSS3 is used to move an element from its current position to another, based on the given X-axis and Y-axis within the given parameter.
• The translate() method in CSS3 requires two parameters: one for the X-axis and one for the Y-axis.
• In the given code above, the div element is moved 50px to the right and 100px going down from its original position.
• If only one parameter is listed in the translate() method (ex: translate(50px); ), it only moves the element in the X-axis.
• Using the rotateX() method, you will be able to rotate an element on its X-axis at a given angle of rotation.
• The matrix() method combines all the transformation into one, scaling, skewing, and translating the element at once, using the values of scaleX(), skewY(), skewX(), scaleY(), translateX(), and translateY(), respectively.
• The skewX() and skewY() method skew the element along the X-axis or Y-axis only, respectively, and require only one parameter.
• The scaleX() and scaleY() method increase or decrease the width and height, respectively, of an element.
• The rotateX(), rotateY(), rotateZ() method allows you to rotate the element clockwise or counterclockwise, depending on the angle of rotation.
• Using the rotateY() method, you will be able to rotate an element around its Y-axis at a given degree.
• The rotateZ() method will rotate the element in its Z-axis at a given degree.
• The skew() method skews the element along its X-axis and Y-axis, with the skewness determined by a given angle in degrees, which is a parameter of the method.
• The rotate() method in CSS3 enables the element to rotate clockwise or counterclockwise, with the parameter being the angle of rotation expressed in degrees.
• Positive values will rotate the element clockwise, while negative values will rotate the element counter-clockwise.
• The scale() method in CSS3 will enable an element to increase or decrease its size based on its given width and height, requiring two parameters: one for the width and one for the height.
• In the given example below, the div element will triple its width and decrease its height by half.
• If only one parameter is used in the scale() method, both the width and height will be scaled according to that value.
• The <div> element is used to layout web pages and may wrap a navigational menu or a list of blog posts but by itself it doesn't convey what it is representing in a page.
• The <div> element can be given a CSS class to display information about its intended purpose.
• HTML5 includes a set of markup elements to solve the matter of elements with no specific documented responsibility.
• The new elements in HTML5 have names that clearly indicate their content.
• The <header> element represents the whole page's header or a section of it and usually contains a logo, search, navigational links, etc.
• Configure a relative position (use position: relative; top: -40px;) and save your file as Section_FullName_Layout.html.
• The <header> element is one of the HTML5 elements and can be placed in any part of an HTML document.
• The <header> element is commonly used to contain the heading (an <h1>–<h6> element) of a surrounding section.
• The <header> element is not permitted to be placed inside the <footer> and <address> elements, and in another <header> tag.
• The <nav> element provides navigation links, either to other pages or within the current page and is defined this way:
• The <nav> element is advised to be used only for the main navigational structures and not for a minor set of hyperlinks (such as those found in the footer of a web page).
• HTML and HTML5 have several differences.
• Various HTML5 tags can be used on a web page.
• Multimedia tags in HTML5 include video and audio.
• Multimedia files can be added to a web page with HTML5 elements.
• At the start of the World Wide Web, a MIDI file could be added to a web page for a little soundtrack.
• Superior choices permitted sound and video designs to be embedded in a web page.
• A native solution to multimedia Web files would solve many problems with current technologies.
• There are two format decisions to make when preparing audio or video content: how the media is encoded and the container format for the media.