Translate () method
The translate () method moves from the current element position according to the parameters given at the left (x-axis) and top (Y-axis) positions.
12345678910111213141516171819202122232425 |
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
#div2
{
transform:translate(50px,100px);
}
</
style
>
</
head
>
<
body
>
<
div
>Hello. This is a DIV element.</
div
>
<
div
id
=
"div2"
>Hello. This is a DIV element.</
div
>
</
body
>
</
html
>
|
Rotate () method
12345678910111213141516171819202122232425 |
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(45deg);
}
</
style
>
</
head
>
<
body
>
<
div
>你好。这是一个 DIV 元素。</
div
>
<
div
id
=
"div2"
>你好。这是一个 DIV 元素。</
div
>
</
body
>
</
html
>
|
Scale () method
The scale () method, which increases or decreases the size of the element, depends on the width (x-axis) and height (y-axis) parameters:
1234567891011121314151617181920212223242526 |
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
}
</
style
>
</
head
>
<
body
>
<
div
>Hello. This is a DIV element.</
div
>
<
div
id
=
"div2"
>Hello. This is a DIV element.</
div
>
</
body
>
</
html
>
|
Skew () method
The skew () method, which is given an angle based on the horizontal (x-axis) and vertical (Y-axis) line parameters:
12345678910111213141516171819202122232425 |
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg)
}
</
style
>
</
head
>
<
body
>
<
div
>Hello. This is a DIV element.</
div
>
<
div
id
=
"div2"
>Hello. This is a DIV element.</
div
>
</
body
>
</
html
>
|
Matrix () method
The matrix () method and the 2D transform method are combined into one.
The matrix method has six parameters, including rotation, zoom, move (pan), and tilt.
12345678910111213141516171819202122232425 |
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</
style
>
</
head
>
<
body
>
<
div
>Hello. This is a DIV element.</
div
>
<
div
id
=
"div2"
>Hello. This is a DIV element.</
div
>
</
body
>
</
html
>
|
New Conversion Properties
All of the conversion properties are listed below:
| Property
Description |
CSS |
Transform |
Elements for 2D or 3D conversions |
3 |
Transform-origin |
Allows you to change the location of the conversion element |
3 |
Conversion method
function |
description |
Matrix ( n , n , n , n , n , n ) |
defines a 2D conversion, using a matrix of six values. |
Translate ( x , y ) |
to define 2D transformations, moving elements along the x and Y axes. |
TranslateX ( n ) |
defines the 2D transformation, moving elements along the X-axis. |
translatey ( n ) |
defines the 2D transformation, moving elements along the Y axis. |
Scale ( x , y ) |
defines the 2D scaling transformation, changing the width and height of the element. |
ScaleX ( n ) |
defines the 2D scaling transformation, changing the width of the element. |
ScaleY ( n ) |
defines the 2D scaling transformation, changing the height of the element. |
rotate ( angle ) |
defines the 2D rotation, which specifies the angle in the parameter. |
skew ( x-angle , y-angle ) |
defines a 2D tilt transition along the x and Y axes. |
skewx ( angle ) |
defines a 2D tilt transition along the X-axis. |
skewy ( angle ) |
defines a 2D tilt transition along the Y-axis. |
CSS3 2D Translation of learning notes