2D transforms in CSS3

CSSWeb DevelopmentFront End Technology

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.

The following table has contained common values that are used in 2D transforms

S.No
Values & Description
1
matrix(n,n,n,n,n,n)
Used to defines matrix transforms with six values
2
translate(x,y)
Used to transforms the element along with x-axis and y-axis
3
translateX(n)
Used to transforms the element along with x-axis
4
translateY(n)
Used to transforms the element along with y-axis
5
scale(x,y)
Used to change the width and height of element
6
scaleX(n)
Used to change the width of element
7
scaleY(n)
Used to change the height of element
8
rotate(angle)
Used to rotate the element based on an angle
9
skewX(angle)
Used to defines skew transforms along with x axis
10
skewY(angle)
Used to defines skew transforms along with y axis
raja
Published on 02-May-2018 15:09:01
Advertisements