CSS 2D-transformasies
CSS 2D-transformasies
CSS-transformasies laat jou toe om elemente te skuif, draai, skaal en skeeftrek.
Beweeg oor die element hieronder om 'n 2D-transformasie te sien:
In hierdie hoofstuk sal jy leer oor die volgende CSS-eienskap:
transform
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D Transformasies Metodes
Met die CSS- transformeienskap kan jy die volgende 2D-transformasiemetodes gebruik:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Wenk: Jy sal in die volgende hoofstuk van 3D-transformasies leer.
Die translate()-metode
Die translate()metode skuif 'n element vanaf sy huidige posisie (volgens die parameters wat vir die X-as en die Y-as gegee word).
Die volgende voorbeeld skuif die <div>-element 50 piksels na regs, en 100 piksels af vanaf sy huidige posisie:
Voorbeeld
div
{
transform: translate(50px, 100px);
}
Die rotate() metode
Die rotate()metode draai 'n element kloksgewys of antikloksgewys volgens 'n gegewe graad.
Die volgende voorbeeld draai die <div>-element kloksgewys met 20 grade:
Voorbeeld
div
{
transform: rotate(20deg);
}
Die gebruik van negatiewe waardes sal die element antikloksgewys draai.
Die volgende voorbeeld draai die <div>-element antikloksgewys met 20 grade:
Voorbeeld
div
{
transform: rotate(-20deg);
}
Die skaal() Metode
Die scale()metode vergroot of verklein die grootte van 'n element (volgens die parameters wat vir die breedte en hoogte gegee word).
Die volgende voorbeeld verhoog die <div>-element om twee keer van sy oorspronklike breedte en drie keer van sy oorspronklike hoogte te wees:
Voorbeeld
div
{
transform: scale(2, 3);
}
Die volgende voorbeeld verminder die <div>-element tot die helfte van sy oorspronklike breedte en hoogte:
Voorbeeld
div
{
transform: scale(0.5, 0.5);
}
Die scaleX() Metode
Die scaleX()metode vergroot of verklein die breedte van 'n element.
Die volgende voorbeeld vergroot die <div>-element om twee keer van sy oorspronklike breedte te wees:
Voorbeeld
div
{
transform: scaleX(2);
}
Die volgende voorbeeld verminder die <div>-element tot die helfte van sy oorspronklike breedte:
Voorbeeld
div
{
transform: scaleX(0.5);
}
Die scaleY() Metode
Die scaleY()metode verhoog of verminder die hoogte van 'n element.
Die volgende voorbeeld verhoog die <div>-element om drie keer van sy oorspronklike hoogte te wees:
Voorbeeld
div
{
transform: scaleY(3);
}
Die volgende voorbeeld verminder die <div>-element tot die helfte van sy oorspronklike hoogte:
Voorbeeld
div
{
transform: scaleY(0.5);
}
Die skewX()-metode
Die skewX()metode skeef 'n element langs die X-as met die gegewe hoek.
Die volgende voorbeeld skeef die <div>-element 20 grade langs die X-as:
Voorbeeld
div
{
transform: skewX(20deg);
}
Die skewY()-metode
Die skewY()metode skeef 'n element langs die Y-as met die gegewe hoek.
Die volgende voorbeeld skeef die <div>-element 20 grade langs die Y-as:
Voorbeeld
div
{
transform: skewY(20deg);
}
Die skew()-metode
Die skew()metode skeef 'n element langs die X- en Y-as volgens die gegewe hoeke.
Die volgende voorbeeld skeef die <div>-element 20 grade langs die X-as, en 10 grade langs die Y-as:
Voorbeeld
div
{
transform: skew(20deg, 10deg);
}
As die tweede parameter nie gespesifiseer is nie, het dit 'n nulwaarde. Dus, die volgende voorbeeld skeef die <div>-element 20 grade langs die X-as:
Voorbeeld
div
{
transform: skew(20deg);
}
Die matriks() Metode
Die matrix()metode kombineer al die 2D-transformasiemetodes in een.
Die matrix()-metode neem ses parameters, wat wiskundige funksies bevat, wat jou toelaat om elemente te draai, skaal, skuif (vertaal) en skeeftrek.
Die parameters is soos volg: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Voorbeeld
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS-transformasie-eienskappe
Die volgende tabel lys al die 2D-transformasie-eienskappe:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D-transformasiemetodes
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |