What Is the CSS transform Property?

The CSS transform property specifies the transformational effect you wish to apply to an HTML element.
Syntax:

html-element {
transform: value;
}
The CSS transform property accepts the following values:
 inherit: Transforms the element with its parent element's transform value.
 initial: Transforms the HTML element with its default transform value.
 matrix(): Transforms the element two-dimensionally with a matrix of six values.
 matrix3d(): Transforms the HTML element three-dimensionally with a 4x4 matrix of sixteen values.
 none: Applies no transformation to the HTML element.
 perspective(): Transforms a 3D transformed element with a perspective view.
 rotate(): Transforms the element by rotating it two-dimensionally.
 rotate3d(): Transforms the element by rotating it three-dimensionally.
 rotateX(): Transforms the element by rotating it three-dimensionally along the X-axis.
 rotateY(): Transforms the element by rotating it three-dimensionally along the Y-axis.
 rotateZ(): Transforms the HTML element by rotating it three-dimensionally along the Z-axis.
 scale(): Transforms the element by scaling it two-dimensionally.
 scale3d(): Transforms the element by scaling it three-dimensionally.
 scaleX(): Transforms the element by scaling it along the X-axis.
 scaleY(): Transforms the element by scaling it along the Y-axis.
 scaleZ(): Transforms the HTML element by scaling it three-dimensionally along the Z-axis.
 skew(): Transforms the element by skewing it two-dimensionally along the X- and Y-axis.
 skewX(): Transforms the element by skewing it two-dimensionally along the X-axis.
 skewY(): Transforms the element by skewing it two-dimensionally along the Y-axis.
 translate(): Transforms the HTML element by translating (moving) it two-dimensionally.
 translate3d(): Transforms the element by translating it three-dimensionally.
 translateX(): Transforms the element by translating it along the X-axis.
 translateY(): Transforms the element by translating it along the Y-axis.
 translateZ(): Transforms the element by translating it three-dimensionally along the Z-axis.

Note: The transform property accepts one or more CSS transform functions. For instance, here's a valid
transform declaration:

div {
transform: perspective(370px) scaleZ(5) rotate(17deg);
}

What is the CSS rotate() Function?

rotate() transforms an element by rotating it two-dimensionally around a fixed point.
Note:
 "Transform origin" is the fixed point around which an element rotates.
 You can define your element's fixed point using the CSS transform-origin property. But the default is
center.

rotate() accepts a single argument.

element {
transform: rotate(angle);
}
Note the following:

 The rotate(angle) function is equivalent to rotate3d(0, 0, 1, angle) or rotateZ(angle).

 The angle argument specifies the element's angle of rotation.
 angle can be in degrees, gradians, radians, or turns.
 An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
 Your browser's writing direction determines the element's direction of rotation.
 A positive angle will rotate the element clockwise in a left-to-right writing direction. But a negative
angle will do a counterclockwise rotation.
 A positive angle will rotate the element counterclockwise in a right-to-left writing context. But a
negative angle will do a clockwise rotation.

How to do a zero-degree rotation in CSS:

img {
transform: rotate(0deg);
width: 80%;
}

How to do a 45-degree rotation in CSS:

img {
transform: rotate(45deg);
width: 80%;
}

What is the CSS rotateX() Function?

rotateX() transforms an element by rotating it three-dimensionally around the X-axis.

Syntax: rotateX() accepts a single argument.

element {
transform: rotateX(angle);
}

Note the following:

 The rotateX(angle) function is equivalent to rotate3d(1, 0, 0, angle).
 The angle argument specifies the element's angle of rotation.
 angle can be in degree, gradian, radian, or turn.
 An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
Examples of the CSS rotateX() function:

Syntax:
img {
transform: rotateX(0deg);
width: 80%;
}

70-degree rotation

img {
transform: rotateX(70deg);
width: 80%;
}

What is the CSS rotateY() Function?

rotateY() transforms an element by rotating it three-dimensionally around the Y-axis.

Syntax:

element {
transform: rotateY(angle);
}

Note the following:

 The rotateY(angle) function is equivalent to rotate3d(0, 1, 0, angle).
 The angle argument specifies the element's angle of rotation.
 angle can be in degrees, gradians, radians, or turns.
 An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.

Examples of the CSS rotateY() function

Zero-degree rotation
img {
transform: rotateY(0deg);
width: 80%;
}
What is the CSS rotateZ() Function?
rotateZ() transforms an element by rotating it three-dimensionally around the Z-axis.

Syntax of the CSS rotateZ() function

rotateZ() accepts a single argument. Here is the syntax:

element {
transform: rotateZ(angle);
}

Note the following:

 The rotateZ(angle) function is equivalent to rotate3d(0, 0, 1, angle) or rotate(angle).
 The angle argument specifies the element's angle of rotation.
 angle can be in degrees, gradians, radians, or turns.
 An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
Examples of the CSS rotateZ() function
Below are some examples of how the CSS rotateZ() function works.

How to do a zero-degree rotation around the Z-axis:

img {
transform: rotateZ(0deg);
width: 80%;
}

What is the CSS rotate3d() Function?

 rotate3d() transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.

Syntax of the CSS rotate3d() function

rotate3d() accepts four arguments. Here is the syntax:
element {
transform: rotate3d(x, y, z, angle);
}

Note the following:

 The x, y, and z arguments are numbers specifying the x-, y-, and z-coordinates.
 The coordinates are the axis around which the element will rotate.
 The angle argument specifies the element's angle of rotation.
 angle can be in degrees, gradians, radians, or turns.
 An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.

Examples of the CSS rotate3d() function

Below are some examples of how the CSS rotate3d() function works.

How to do a 70-degree rotation around the Z-axis:

img {
transform: rotate3d(0, 0, 1, 70deg);
width: 80%;
}

CSS Rotate Functions vs. rotate Property: What's the Difference?

CSS rotate functions and CSS rotate property provides two similar ways to specify rotation transformations.
The main differences between the two rotation techniques are as follows:
 The CSS rotate property allows rotating an element without using the CSS transform property.
 The CSS rotate property's syntax is shorter than its function alternative.
 The CSS rotate property saves you from remembering the specific order to position the transform
functions.
 Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transform
property—from left to right.
 Browsers calculate the transform properties' matrix in the following transformation matrix order:
1. translate
2. rotate
3. scale

Rotate property syntax:

img {
rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */
width: 80%;
}

70-degree:
img {
rotate: x 70deg; /* Equal to a transform: rotateX(70deg) property */
width: 80%;
}

What is the CSS scale() Function?

scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.
Note:
 "Transform origin" is the fixed point from which the computer scales an element.
 You can define your element's fixed point using the CSS transform-origin property. But the default is
center.

Syntax:
element {
transform: scale(x, y);
}

Note:
 scale(0.3) is equivalent to scale(0.3, 0.3).
 The percentage equivalence of scale(0.3) is scale(30%).
How to scale an element non-uniformly along the X- and Y-axis in CSS:
img {
transform: scale(0.3, 65%);
transform-origin: top left;
}

How to scale an element along only the X-axis:

img {
transform: scale(0.3, 1);
transform-origin: top left;
}

Note:
 A scale factor of 1 or 100% tells browsers not to apply any scaling effect on the selected element.
 scale(0.3, 1) is equivalent to scaleX(0.3).

How to scale an element along only the Y-axis:

img {
transform: scale(100%, 0.2);
transform-origin: top left;
}

Note:
 A 100% or 1 scale factor tells browsers not to apply any scaling effect on the selected element.
 scale(100%, 0.2) is equivalent to scaleY(0.2).
CSS scale() Function vs. scale Property: What's the Difference?
The CSS scale() function and the CSS scale property provide two similar ways to specify a scale
transformation.
The main differences between the two scaling techniques are as follows:
 The CSS scale property allows scaling an element without using the CSS transform property.
 The CSS scale property's syntax is shorter than its function alternative.
 The CSS scale property saves you from remembering the specific order to position the transform
functions.
 Browsers calculate the transform functions' matrix in the order you assigned them to the CSS
transform property—from left to right.
 Browsers calculate the transform properties' matrix in the following order:
1. translate
2. rotate
3. scale

What is the CSS scaleZ() Function?

scaleZ() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along
the z-axis.

Note:
 "Transform origin" is the fixed point from which the computer scales an element.
 You can define your element's fixed point using the CSS transform-origin property. But the default
is center.

Syntax of the CSS scaleZ() function

scaleZ() accepts a single argument. Here is the syntax:
element {
transform: scaleZ(number);
}

Note:
 The scaleZ(number) function is equivalent to scale3d(1, 1, number).
 The number argument specifies the element's scaling factor along the z-axis.

What is the CSS skew() Function?

skew() transforms an element by slanting (skewing) it two-dimensionally around a fixed point.

Note:
 "Transform origin" is the fixed point from which the computer skews an element.
 You can define your element's fixed point using the CSS transform-origin property. But the default
is center.
Syntax of the CSS skew() function
skew() accepts two arguments. Here is the syntax:
element {
transform: skew(aX, aY);
}

Note the following:

 The aX argument specifies the element's skewing angle along the x-axis.
 The aY argument specifies the element's skewing angle along the y-axis.
 aX and aY can be in degrees, gradians, radians, or turns.
 An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
 aY is an optional argument.

What is the CSS translate() Function?

translate() transforms an element by repositioning (translating) it two-dimensionally.

Syntax of the CSS translate() function

translate() accepts two arguments. Here is the syntax:
element {
transform: translate(x, y);
}

Note the following:

 The x argument can be a length or percentage value. It specifies the distance you wish to move the
element from its original x-axis position.
 The y argument can be a length or percentage value. It defines the distance you wish to move the
element from its original y-axis position.
 y is an optional argument.

What is the CSS translateZ() Function?

translateZ() transforms an element by repositioning (translating) it three-dimensionally along the z-
axis.
Syntax of the CSS translateZ() function
translateZ() accepts a single argument. Here is the syntax:
element {
transform: translateZ(length);
}
The length argument specifies the distance you wish to move the element from its original z-axis position.

What is the CSS perspective() Function?

perspective() transforms an element by adding some perspective effects to it.

Syntax of the CSS perspective() function

perspective() accepts only one argument. Here is the syntax:
element {
transform: perspective(length);
}

The length argument specifies the user's distance to the z=0 plane.
A three dimensional Cartesian coordinate system with a red arrow defining the distance between the user and
the z=0 plane
What are CSS Animations?
An animation lets an element gradually change from one style to another. You can change as many CSS
properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes
for the animation. Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current
style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will last for 4
seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Note: The animation-duration property defines how long an animation should take to complete. If the
animation-duration property is not specified, no animation will occur, because the default value is 0s (0
seconds).

In the example above we have specified when the style will change by using the keywords "from" and "to"
(which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will change the background-color of the <div> element when the animation is 25%
complete, 50% complete, and again when the animation is 100% complete:

Example
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
 50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Delay an Animation
The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should be played forwards, backwards or
in alternate cycles.

The animation-direction property can have the following values:

 normal - The animation is played as normal (forwards). This is default

 reverse - The animation is played in reverse direction (backwards)
 alternate - The animation is played forwards first, then backwards
 alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

div {
width: 100px;
height: 100px;
 position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

Specify the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

 ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
 linear - Specifies an animation with the same speed from start to end
 ease-in - Specifies an animation with a slow start
 ease-out - Specifies an animation with a slow end
 ease-in-out - Specifies an animation with a slow start and end
 cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

Example

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Specify the fill-mode For an Animation

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played.
The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing
(before it starts, after it ends, or both).

The animation-fill-mode property can have the following values:

 none - Default value. Animation will not apply any styles to the element before or after it is executing
 forwards - The element will retain the style values that is set by the last keyframe (depends on
animation-direction and animation-iteration-count)
 backwards - The element will get the style values that is set by the first keyframe (depends on
animation-direction), and retain this during the animation-delay period
 both - The animation will follow the rules for both forwards and backwards, extending the animation
properties in both directions
CSS Animation Properties
The following table lists the @keyframes rule and all the CSS animation properties:

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
Specifies whether an animation should be played forwards, backwards or in
animation-direction
alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
Specifies a style for the element when the animation is not playing (before it
animation-fill-mode
starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

What is JavaScript??
JavaScript is a programming language that adds interactivity to your website. This happens in games, in
the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with
animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is
possible.

JavaScript is a powerful programming language that can add interactivity to a website. It was invented by
Brendan Eich.

JavaScript is versatile and beginner-friendly. With more experience, you'll be able to create games, animated 2D
and 3D graphics, comprehensive database-driven apps, and much more!

JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of tools on top of the
core JavaScript language, unlocking a vast amount of functionality with minimum effort. These include:

 Browser Application Programming Interfaces (APIs) built into web browsers, providing functionality
such as dynamically creating HTML and setting CSS styles; collecting and manipulating a video stream
from a user's webcam, or generating 3D graphics and audio samples.
 Third-party APIs that allow developers to incorporate functionality in sites from other content providers,
such as Disqus or Facebook.
  Third-party frameworks and libraries that you can apply to HTML to accelerate the work of building sites
and applications.

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

Example

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the
<head> section of an HTML page, or in both.

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

What is a string?
 Strings are for storing text
 Strings are written with quotes

Using Quotes
 A JavaScript string is zero or more characters written inside quotes.

Example

let text = "John Doe";

Quotes Inside Quotes

You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Example

let answer1 = "It's alright";

let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';
Template Strings
Templates were introduced with ES6 (JavaScript 2016).

Templates are strings enclosed in backticks (`This is a template string`).

Templates allow single and double quotes inside a string:

Example
let text = `He's often called "Johnny"`;

Escape Characters
Because strings must be written within quotes, JavaScript will misunderstand this string:

let text = "We are the so-called "Vikings" from the north.";

The string will be chopped to "We are the so-called ".

To solve this problem, you can use a backslash escape character.

The backslash escape character (\) turns special characters into string characters:

Code Result Description

\' ' Single quote
\" " Double quote
\\ \ Backslash

Examples

\" inserts a double quote in a string:

let text = "We are the so-called \"Vikings\" from the north.";

Back-Tics Syntax
Template Strings use back-ticks (``) rather than the quotes ("") to define a string:

Example

let text = `Hello World!`;

Interpolation
Template String provide an easy way to interpolate variables and expressions into strings.
The method is called string interpolation.

The syntax is:

${...}

JavaScript String concat()/concacetation/concatenation

concat() joins two or more strings:

Example

let text1 = "Hello";

let text2 = "World";
let text3 = text1.concat(" ", text2);
The concat() method can be used instead of the plus operator. These two lines do the same: