multiple transforms in css

MULTIPLE TRANSFORMS IN CSS

 

while coding you may encounter how to use two transformations to one single division ......

if your code doesn't work when you code lilke this

div{

    transform:rotate(30deg);

    transform:translate(200px);

}

/* your division only gets translated but not rotated but not rotated 

        if you code like above , only the last line(last style with same property) will be executed */

so now to fix your code i have a technique that is 

 

use two properties followed by a space like this (below)

div{

    transform: rotate(30deg)  translate(200px);

}

but remember if you code like this the div gets rotated first and then it is translated

if you want your division to get translated first and then get rotated then code like this

div{

    transform:  translate(200px) rotate(30deg) ;

}

please watch this video to know how to use multiple transforms for one division in html

these are the property values you can use when you use transform property

none

defines that there should be no transformation

matrix(n,n,n,n,n,n)

defines a 2d transformation using a matrix of six values

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

defines a 3d transformation using a 4x4 matrix of 16 values

translate(x,y)

defines a 2D translation x - ordinate and y - ordinate

translate(x,y,z)

defines a 3D translation x - ordinate and y - ordinate z - ordinate

translateX(x)

defines a translation using only the value for the x axis

translateY(y)

defines a translation using only the value for the y axis

translateZ(z)

defines a translation using only the value for the z axis

scale(x,y)

defines a 2d scale transformation

scale3d(x,y)

defines a 3d scale transformation

scaleX(x)

defines a scale transformation by giving a value for the x-axis

scaleY(y)

defines a scale transformation by giving a value for the y-axis

scaleZ(z)

defines a scale transformation by giving a value for the z-axis

rotate(angle)

defines a 2d rotation the angle specified in the parameter

rotateX(angle)

defines a 3d rotation along x-axis

rotateY(angle)

defines a 3d rotation along y-axis

rotateZ(angle)

defines a 3d rotation along z-axis

rotate3d(x,y,z,angle)

defines a 3d rotation

skew(x,y)

defines a 2d skew transformation along x-axis and the y - axis

skewX(angle)

defines a 2d skew transformation along the x axis

skewY(angle)

defines a 2d skew transformation along the x axis

perspective(n)

defines a perspective view for a 3d transformed element

initial

sets the property to its default value

inherit

inherits this property from its parent element

for more videos please subscribe my youtube channel @kssvinay

once check my youtube channel 

        it has videos on AP state maths syllabus and also some coding tutuorials