The vertical-align Property

The vertical-align property also takes the following values: baseline, sub, super, % and px (or pt,
cm).
The example below shows the difference between them.

The HTML:
<p>This is an <span class="baseline">inline text</span> example.</p>
<p>This is a <span class="sub">sub line text</span> example.</p>
<p> This is a <span class="super">super line text</span> example.</p>
<p> This is a <span class="pixel">pixel</span> example.</p>
HTML
The CSS:
Result:contentImage
Instead of px values, you can use pt (points), cm (centimeters) and % (percentage) values.

312 Comments
The text-decoration Property

The text-decoration property specifies how the text will be decorated.

Commonly used values are:

none - The default value, this defines a normal text
inherit - Inherits this property from its parent element
overline - Draws a horizontal line above the text
underline - Draws a horizontal line below the text
line-through - draws a horizontal line through the text (substitutes the HTML <s> tag)

The example below demonstrates the difference between each value.

The HTML:
<p class="none">This is default style of the text (none).</p>
<p class="inherit">This text inherits the decoration of the parent.</p>
<p class="overline">This is overlined text.</p>
<p class="underline">This is underlined text.</p>
<p class="line-through">This is lined-through text.</p>
HTML
The CSS:
p.none {
text-decoration: none;
}
p.inherit {
text-decoration: inherit;
}
p.overline {
text-decoration: overline;
}
p.underline {
text-decoration: underline;
}
p.line-through {
text-decoration: line-through;
}
CSS
Try it Yourself

Result:
You can combine the underline, overline, or line-through values in a space-separated list
to add multiple decoration lines.

text-transform Values

Using text-transform property you can make text appear in all-uppercase or all-lowercase.
Here is an example:

The HTML:
<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>
HTML
The CSS:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
CSS
Try it Yourself

Result:

Uppercase
Make the text of your heading and subheadings appear all-uppercase.
Start Coding (+5XP)
The value none will produce no capitalization effect at all.
The word-spacing Property

The word-spacing property specifies the space between words in a text. Just like the letter-
spacing property, you can set the word-spacing values as normal, length, and inherit.

The HTML:
<p class="normal">This paragraph has no additional word-spacing applied.</p>
<p class="px">This paragraph is word-spaced at 30px.</p>
HTML
The CSS:
p.normal {
word-spacing: normal;
}
p.px {
word-spacing: 30px;
}
CSS
Try it Yourself
Result:
When a weird spacing is used, and it is necessary to keep the selected paragraph with
normal word spacing, the normal option is usually used.

The white-space Property

The white-space property specifies how white-space inside an element is handled. The
values can be set as normal, inherit, nowrap, etc.

The nowrap value makes the text continue on the same line until a <br> tag is encountered,
and also collapses all sequences of whitespace into a single whitespace.

The HTML:
<p>
This paragraph has multiple spaces and
a line break, but it will be ignored, as we used the nowrap value.
</p>
HTML
The CSS:
p{
white-space: nowrap;
}
CSS
Try it Yourself
Result:
The text will continue on the same line until a <br /> tag is encountered.

The background-attachment Values

You can also set the background-attachment to inherit or scroll.

When you set the background-attachment to inherit, it will inherit the value from its parent
element.

When you set the background-attachment to scroll, the background image will scroll with
the rest of the content.

The CSS:
body {
background-image: url("css_logo.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
CSS
Try it Yourself
Result:
Run the code and see how it works!

The list-style-type Property

The CSS list properties allow us to set different list item markers. In HTML, there are two
types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
One of the ways is to use the list-style-type property, which can be set
to circle, square, decimal, disc, lower-alpha, etc.

The HTML:
<ol class="lower-alpha">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<ul class="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<ul class="square">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
HTML
The CSS:
ol.lower-alpha {
list-style-type: lower-alpha;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
CSS
Try it Yourself

Result:
Some of the values are for unordered lists, and some for ordered lists.
The list-style Property

The list-style property is a shorthand property for setting list-style-type, list-style-image

and list-style-position. It is used to set all of the list properties in one declaration:
ul {
list-style: square outside none;
}
CSS
This would be the same as the longhand version.
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
CSS
Try it Yourself

Result:
If one of the property values are missing, the default value for the missing property will be
inserted, if any.
The empty-cells Property

The empty-cells property specifies whether or not to display borders and background on

empty cells in a table.
Possible values are:
show: the borders of an empty cell are rendered
hide: the borders of an empty cell are not drawn

Here is the empty-cells property that is used to hide borders of empty cells in the <table>
element.

The HTML:
<table border="1">
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td></td>
</tr>
</table>
HTML
The CSS:
table {
border-collapse: separate;
empty-cells: hide;
}
CSS
Try it Yourself

Result:
Run the code and see how it works!

The table-layout Property

The table-layout specifies how the width of table columns is calculated. The possible

values are:
auto - when column or cell width are not explicitly set, the column width will be in
proportion to the amount of content in the cells that make up the column
fixed - when column or cell width are not explicitly set, the column width will not be
affected by the amount of content in the cells that make up the column.

The table layout is set to auto by default.

The example below shows the difference between auto and fixed.

Setting Styles to Links

Links can be styled with any CSS property (e.g., color, font-family, background, etc.).
In addition, links can be styled differently, depending on what state they are in. The
following pseudo selectors are available:
a:link - defines the style for normal unvisited links
a:visited - defines the style for visited links
a:active - a link becomes active once you click on it
a:hover - a link is hovered when the mouse is over it

The example below creates a link that will change the style when the mouse is moved over
it.

Setting the Mouse Cursor Style

CSS allows you to set your desired cursor style when you mouse over an element. For
example, you can change your cursor into a hand icon, help icon, and much more, rather
than using the default pointer.

In the example below, the mouse pointer is set to a help icon when we mouse over the span
element:
<span style="cursor:help;">
Do you need help?
</span>
HTML
Try it Yourself

Result:
Run the code and see how it works!

The cursor Property Values

There are numerous other possible values for the cursor property, such as:
default - default cursor
crosshair - cursor displays as crosshair
pointer - cursor displays hand icon
The list of possible values is quite long.
The image below demonstrates the various available styles:

CSS allows you to set your desired cursor style when you mouse over an element.

Clearing the Float

Elements that come after the floating element will flow around it. To avoid this, use the
clear property.
The clear property specifies the sides of an element where other floating elements are not
allowed to be.

In the example below, if we set the float property to the div, only the paragraph that comes
after the div will be wrapped around the image.

CSS Vendor Prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new
CSS features during periods of testing and experimentation. Browser prefixes are used to add new
features that may not be part of the final and formal CSS specification.

For example, the prefix for Safari and Chrome is -webkit. The border-radius property is currently
supported in Chrome, Safari, and Mozilla, as long as it is accompanied by the browser prefix.
To specify the border-radius in Chrome and Safari, the following syntax is used:
-webkit-border-radius: 24px;
CSS
Try it Yourself
Result: The prefix is added to the property to make it work in the unsupported browsers. So,
you might end up with multiple definitions of the same property, each with the specific browser
prefix.
While most browsers today will work without prefixes, it is essential to know these for backwards
capability and understanding older codes.

Figma 5colums

Negative Values

Negative values can also be used for the box-shadow property.

horizontal offset - the shadow will be to the left of the box

vertical offset - the shadow will be above the box
blur radius - negative values are not allowed
spread radius - negative values will cause the shadow to shrink

For example:
box-shadow: -10px-10px 5px -5px #888888;
CSS
Try it Yourself

Result:
Run the code and see how it works!
Well done!
Continue
Back

Transparency Effect

Before CSS3, transparent background images were used to create transparency effects. The new
features of CSS3 now make it easier to create transparency effects.

CSS supports color names, hexadecimal, and RGB colors.

In addition, CSS3 introduces the following:

RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel, which specifies
the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a
number between 0.0 (fully transparent) and 1.0 (fully opaque).

HSL (Hue, Saturation, Lightness) Colors

An HSL color value is specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel ranging from 0 to 360
0 (or 360) is red, 120 is green, 240 is blue.
Saturation is a percentage value: 100% is the full color.
Lightness is also a percentage; 0% is dark (black) and 100% is white. HSLA color values are an
extension of HSL color values with an alpha channel - which specifies the opacity for a color (just
like RGBA).

In the example below, a transparent glass menu bar is created with CSS3.

In the HTML file, a <nav> tag containing an <ul> list with links has been added:
<nav>
<ul>
<li><a href="#">COURSES</a></li>
<li><a href="#">DISCUSS</a></li>
<li><a href="#">TOP LEARNERS</a></li>
<li><a href="#">BLOG</a></li>
</ul>
</nav>
HTML
A number of CSS3 features are used to create the effects:
body {
background:url("bg.jpg");
}
nav {
padding: 50px 0;
min-width: 500px;
}
nav ul {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1),
inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 10px;
color: #FFFFFF;
font-size: 18px;
font-family: Arial;
text-decoration: none;
display: block;
}
CSS
Try it Yourself

Result: The <ul> tag has been styled with a background gradient that is white and transparent.
Two box-shadow values have been added, one for an outer, dark shadow; and one for an inner, light
edge.
Some of the properties used (like the background gradients) will be discussed in the upcoming
lessons.
Continue

Multiple Text Shadows

The text-shadow style can accept multiple values in a comma-separated list.

According to CSS2, the shadows are laid down in the order they appear, so if they overlap, the last
one that is specified should appear on top. CSS3 has now changed that so they are applied
in reverse order.

To create multiple shadows, the shadows are separated with a comma.

Here is an example:
h1 {
text-shadow: 5px 10px 2px #93968f,
-3px 6px 5px #58d1e3;
}
CSS
Try it Yourself
This example defines two text shadows at different locations, blur radius, and colors. This makes it

look like there are two different light sources on the text. To make a text shadow look realistic,
remember these few shadow characteristics:

- A shadow which is close to the text is normally not as blurred as a shadow that is far from the text.
A shadow that is far from the text usually implies a light source which is also far from the text.

- A shadow which is close to the text usually implies that the underlying surface is close, that the
light is close, or both. A close shadow is often darker than a distant shadow, because less light can
get in between the shape and the underlying surface.
To remove a text-shadow, set the text-shadow property to none; no shadows will be associated with
that element.
Well done!
Continue

Working with Pseudo-Classes

The CSS pseudo-classes allow us to style elements, or parts of elements, that exist in the document
tree without using JavaScript or any other scripts. A pseudo-class starts with a ":" (colon).
The most commonly used pseudo-classes are :first-child and :last-child.

The :first-child pseudo-class matches an element that is the first child element of some other
element.
In the following example, the selector matches any <p> element that is the first child of the div
element:

The HTML:
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
</div>
HTML
The CSS:
#parent p:first-child {
color: green;
text-decoration: underline;
}
CSS
Try it Yourself

Result: The :last-child pseudo-
class matches an element that is the last child element of some other element.

In the example below, the selector will match any <p> element that is the last child of the div
element:
#parent p:last-child {
color: green;
text-decoration: underline;
}
CSS
Try it Yourself
Result:

Working with Pseudo Elements

Pseudo elements are used to select specific parts of an element.

There are five pseudo elements in CSS, each starting with a double colon (::):

::first-line - the first line of the text in a selector

::first-letter - the first letter of the text in a selector
::selection - selects the portion of an element that is selected by a user
::before - inserts some content before an element
::after - inserts some content after an element

In the example below, the ::first-line pseudo element is used to style the first line of our text:
::first-line {
color: #589432;
}
CSS
Try it Yourself
Result: The ::selectio
n pseudo element styles the selected text:
p::-moz-selection {
background: #8bc34a;
color: #fff;
}
CSS
Try it Yourself

Result:
The -moz- prefix is used, as the ::selection element is not supported by Mozilla yet.

Working with Pseudo Elements

Using ::before and ::after pseudo elements allows us to add a wide variety of content to the page.

In the example below, the ::before pseudo element is used to add an image before the list.
The HTML:
<p>You can insert text, images, and other resources using <strong>:before </strong>pseudo
element.</p>
<p>You can insert text, images, and other resources using <strong>:before </strong>pseudo
element.</p>
<p>You can insert text, images, and other resources using <strong>:before </strong>pseudo
element.</p>
HTML
The CSS:
::before {
content: url("logo.jpg");
}
CSS
Try it Yourself
Note the content keyword in the syntax.

Result:
If you change the ::before element to ::after in the example above, the images will appear at the
end of the list.
Well done!

The word-wrap Property

The word-wrap property allows long words to be broken and wrapped into the next line. It takes
two values: normal and break-word.

In the example below, the word-wrap property is set to normal.

The CSS:
p{
width: 210px;
height: 100px;
border: 1px solid #000000;
word-wrap: normal;
}
CSS
Try it Yourself
Result: Now let's see what
happens when we use this same example and set the word-wrap property to break-word:
p{
width: 210px;
height: 100px;
border: 1px solid #000000;
word-wrap: break-word;
}
CSS
Try it Yourself

Result:
When the word-wrap property is set to break-word, the browser breaks a word when it is too long
to fit within its container.
The @font-face Rule

The @font-face rule allows custom fonts to be loaded into a webpage.

With the help of this rule, designs are no longer limited to the fonts that are installed on a user's
computer.

In Internet Explorer 8 and earlier, the URL must point to an Embedded OpenType (eot) file, while
Firefox, Chrome, etc. support True Type Fonts (ttf) fonts and OpenType Fonts (otf).

Using the @font-face Rule

Each form of the font family must be declared using the @font-face rule. In the example below, a
custom font called "Delicious" is loaded and used for the heading.

The HTML:
<h1>This is Our Headline</h1>
HTML
The CSS:
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('Delicious-Bold.otf');
}
h1{
font-family: Delicious, sans-serif;
}
CSS
Internet Explorer has a built-in bug when multiple @font-face rules are defined. Using #iefix as
shown below fixes the problem:
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.ttf');
src: url('Delicious-Roman.eot?#iefix');
}
CSS

Result:
The question mark fools IE into thinking the rest of the string is a query string and loads just the
EOT file. The other browsers follow the spec and select the format they need, based on the src
cascade.
Well done!
Continue

Creating Linear Gradients

CSS3 gradients enable you to display smooth transitions between two or more specified colors.
CSS3 defines two types of gradients: Linear and Radial.

To create a linear gradient, you must define at least two color stops. Color stops are the colors
among which you want to render smooth transitions. You can also set a starting point and a
direction - or an angle - along with the gradient effect.
In the example below, the colors blue and black are used to create a linear gradient from top to
bottom.
div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(DeepSkyBlue, Black);
}
CSS
Try it Yourself
This syntax works in Mozilla (-moz). If you work with a different browser, add the corresponding
prefix, so that the browser understands the gradient.

Result:
You can use color names, Hex values, RGB, or HSL colors to define the gradient color.

Color Stops

Colors can be added one after the other, separated with a comma. The browser will then determine
each color stop position.
In the example below, the linear gradient has multiple color stops and runs from top to bottom.
background:-moz-linear-gradient(blue, yellow, green, pink, white);
CSS
Try it Yourself
Result: Color stop positions can
be specified for each color.
background:-moz-linear-gradient(blue 20%, yellow 30%, green 85%);
CSS
Try it Yourself

Result:
In addition to percentages, you can also use px, em, and so on, to specify the color stops.
If you use the same color stop position for two colors, a sharp line will be created between them.

Direction of the Gradient

The direction of the gradient can be changed.

In the example below, the first gradient starts at left, moving right; the second one runs
from bottom to top
div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-moz-linear-gradient(bottom, blue, green, white);
}
CSS
Try it Yourself

Result:
left, right, top, and bottom are supported values for the gradient direction. You can also use their
various combinations to specify direction (e.g., bottom right)
Well done!
B

Angle of the Gradient

As an alternative to predefined directions (bottom, top, right, left, bottom right, etc.), you can
control the gradient's direction by specifying an angle.

The angle is specified as an angle extending between a horizontal line and the gradient line. In other
words, 0deg creates a left-to right-gradient, while 90deg generates a bottom-to-top gradient.
div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(bottom left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-moz-linear-gradient(100deg, blue, green, white);
}
CSS
Try it Yourself

Result:
Run the code and see how it works!
Well done!
Continue
Back

137 Comments
Repeating a Linear-Gradient

The repeating-linear-gradient() function is used to repeat a linear gradient:

background:-moz-repeating-linear-gradient(blue, green 20px);
CSS
Try it Yourself
Result:
Run the code and see how it works!
Well done!
Continue
Back
Creating Linear Gradients

CSS3 gradients enable you to display smooth transitions between two or more specified colors.
CSS3 defines two types of gradients: Linear and Radial.

To create a linear gradient, you must define at least two color stops. Color stops are the colors
among which you want to render smooth transitions. You can also set a starting point and a
direction - or an angle - along with the gradient effect.
In the example below, the colors blue and black are used to create a linear gradient from top to
bottom.
div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(DeepSkyBlue, Black);
}
CSS
Try it Yourself
This syntax works in Mozilla (-moz). If you work with a different browser, add the corresponding
prefix, so that the browser understands the gradient.

Result:
You can use color names, Hex values, RGB, or HSL colors to define the gradient color.
Radial Gradients

To create a radial gradient, you must define at least two color stops.

The radial gradient is defined by its center.

The CSS syntax of the radial gradient looks like this:

background: radial-gradient(position, shape or size, color-stops);
CSS
The first value defines the gradient position. We can use a descriptive keyword, such as top,
bottom, center, or left; or we can specify, for example, 50% 50% to set the gradient at the center or
0% 0% to set the gradient to start at top left.

The second value defines the shape and the gradient size. There are two arguments to shape
gradients: The first is the ellipse, which is the default; and the second is the circle.
Lastly, the third value defines the color combination.

Setting the Shapes

The shape parameter defines the shape. If you do not define the shape of the radial gradient, it will
take the ellipse value by default.

In the example below, we didn't specify the shape of the first div’s radial gradient, but for the
second, we set the value to circle.
Here is what happened:

The CSS:
div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(circle, green, yellow, blue);
}
CSS
Try it Yourself
Result:
Run the code and see how it works!
Well done!

The background-clip Property

The background-clip property specifies the painting area of the background.

The property takes three different values:

border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box

In the example below, the first div with background-clip is set to padding-box; in the second div
it's set to content-box
#first {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: padding-box;
}
#second {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: content-box;
}
CSS
Try it Yourself

Result:
Run the code and see how it works!

Multiple Backgrounds

The ability to have multiple background images is a new feature in CSS3.

Multiple background images are specified using a comma-separated list of values for the
background-image property. The first image will appear on the top, the last on the bottom.

In the example below, we have two background images: the first is a CSS logo (aligned to the
bottom and right); the second is a coding image (aligned to the top-left corner).
The CSS:
div {
width: 400px;
height: 300px;
background-image: url(csslogo.png), url(csscode.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat;
}
CSS
Try it Yourself

Result:
Run the code and see how it works!
Co

Multiple Backgrounds

The position of the background images can be changed, using the background-position property.
For example:
div {
width: 400px;
height: 300px;
background-image: url(csslogo.png), url(csscode.jpg);
background-position: right top, left top;
background-repeat: no-repeat;
}
CSS
Try it Yourself

Result:
Multiple backgrounds can also be specified using the background: shorthand property.
background: url(csslogo.png) right top no-repeat,
url(csscode.jpg) left top no-repeat;
CSS
Try it Yourself
Run the code and see how it works!
Well done!
Continue
Back

CSS3 Transitions

CSS3 transitions allow us to change from one property value to another over a given duration.
transition-property - specifies the property to be transitioned
transition-duration - specifies the duration over which transitions should occur
transition-timing-function - specifies how the pace of the transition changes over its duration
transition-delay - specifies a delay (in seconds) for the transition effect
In the example below, we set the transition property to transform, with a duration of 5 seconds,
and with an ease-in timing function that specifies a transition effect with a slow start.
transition: transform 5s ease-in;
CSS

Transition effects can be applied to a wide variety of CSS properties, including background-

color, width, height, opacity, and many more

The Transition Property

In the example below, the div element has width and height of 50px, with a green background. We
specified a transition effect for the width property, with a duration of 3 seconds:

The CSS will look like this:

div {
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
}
div:hover {
width: 250px;
}
CSS
Try it Yourself
If you hover over the div element, it will move from left to right.

When the cursor is moused out of the element, it will gradually change back to its origin

transition-timing-function

The transition-timing-function property specifies the speed curve of the transition effect.

It can have the following values:
ease - the animation starts slowly, then accelerates quickly.
ease-in - starts slowly, then accelerates, and stops abruptly.
ease-out - starts quickly, but decelerates to a stop.
ease-in-out - similar to ease, but with more subtle acceleration and deceleration.
linear - constant speed throughout the animation; often best for color or opacity changes.
Finally, we have cubic-bezier(), which allows you to define your own values in the cubic-bezier
function. Possible values are numeric values from 0 to 1.
transition-timing-function: cubic-bezier(0,0,1,1);
CSS
Try it Yourself
If no timing function is specified, the default value is ease.

CSS3 Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size, and position.
CSS3 supports 2D and 3D transformations. Let's take a look at the rotate transformation:
div {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
}
CSS
Try it Yourself
The div element before the transform will look like this:

Now let's apply the div element to

rotate by 10deg
div {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(10deg);
}
 CSS
Try it Yourself

And here is the result: The rotate()

method rotates an element clockwise or counter-clockwise, according to a given degree.
Negative value will result in a counter clockwise rotation.
Continue

Using Negative Values

As previously mentioned, using a positive value will rotate an element clockwise, and using a
negative value will rotate the element counter-clockwise.
div.positive {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(10deg);
}
div.negative {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(-10deg);
}
CSS
Try it Yourself
Result:
Run the code and see how it works!
Well done!

transform-origin

The transform-origin property allows you to change the position of transformed elements. The

default value for the property is 50% 50%, which corresponds to the center of the element.
In the example below, we use the transform-origin property together with transform-rotate. The
origin of the x-axis (horizontal) is set to 25% from the left. The origin for the y-axis (vertical) is set
to 75% from above.

The CSS:
div.empty-div {
position: relative;
height: 100px;
width: 100px;
margin: 30px;
padding: 10px;
border: 1px solid black;
}
div.green-div {
padding: 50px;
position: absolute;
background-color: #8bc34a;
border: 1px solid white;
transform: rotate(15deg);
transform-origin: 25% 75%;
}
CSS
Try it Yourself

Result:
0 0 is the same value as top left, and 100% 100% is the same value as bottom right.
The transform-origin property must be used together with the transform property.

The translate() Method

The translate() method moves an element from its current position (according to the parameters
given for the x-axis and the y-axis). Positive values will push an element down and to the right of its
default position, while negative values will pull an element up and to the left of its default position.

In this example below, the div element is moved 100px to the right and 50px down:
div {
padding: 50px;
position: absolute;
background-color: #32CD32;
transform:translate(100px, 50px);
}
CSS
Try it Yourself
Result:
An element can also be moved by setting the margins or by positioning the element, although
translate is a better choice for animating elements.
Well done!
Continue

The skew() Method

The skew() method skews an element along the x-axis and the y-axis by the given angles.

The following example skews the <div> element by 30 degrees along the X-axis:
transform: skew(30deg);
CSS
Try it Yourself
Result:
If the second parameter is not specified, it has a zero value.
Well done!
The scale() Method

The scale() method increases or decreases the size of an element, according to the parameters given
for the width and height. 1 stands for the original size, 2 for twice the original size, and so on.

In the example below, we decreased the first div by the factor 0.7 both horizontally and vertically,
and increased the second div by a factor of 1.5 horizontally and vertically.
div.first {
width: 200px;
height: 100px;
background-color: #8BC34A;
transform: scale(0.7, 0.7);
color:white;
}
div.second {
margin: 60px;
width: 200px;
height: 100px;
background-color: #8bc34a;
transform: scale(1.5,1.5);
color:white;
}
 CSS
Try it Yourself

Result:
If only one parameter is passed to the scale() method, it will apply that factor for both the height and
the width.