css Transform

-

 div{

            /*matrix(scaleX(),SkewXX(),scaleY(),translateX(),translateY())*/
            margin:250px;
            /* transform: rotate(210deg); */
            /* transform: skew(20deg); */
            /* transform:translate(0px ,150px); */
/* transform: skew(10deg,20deg); */
/* transform: rotate(30deg); */
 /* transform-origin: left top;   */
transform: scale(2,2);           
height: 200px;
            width:200px;
            background-color: burlywood;
        }





//with transoform:--
     div{
            /*matrix(scaleX(),SkewXX(),scaleY(),translateX(),translateY())*/
            margin:250px;
            /* transform: rotate(210deg); */
            /* transform: skew(20deg); */
            /* transform:translate(0px ,150px); */
/* transform: skew(10deg,20deg); */
/* transform: rotate(30deg); */
 /* transform-origin: left top;   */
transform: scale(1);           
height: 200px;
            width:200px;
            background-color: burlywood;
        }
        div:hover{
            transform: scale(2);
        }


//with transition
 div{
            /*matrix(scaleX(),SkewXX(),scaleY(),translateX(),translateY())*/
            margin:250px;
            /* transform: rotate(210deg); */
            /* transform: skew(20deg); */
            /* transform:translate(0px ,150px); */
/* transform: skew(10deg,20deg); */
/* transform: rotate(30deg); */
 /* transform-origin: left top;   */
/* transform: scale(1);            */
height: 200px;
            width:200px;
            background-color: burlywood;
        transition: transform 1s;
        }
        div:hover{
transform: rotate(180deg);
            /* transform: translate(30px ,20px); */
            /* transform: scale(2); */
        }

Comments

Post a Comment

Popular posts from this blog

interview questions js[ Anurag Singh ProCodrr]

-
 javascript:- nderstanding-the-difference-between-pure-and-impure-functions-in-javascript/ pure function:- that does not change outside value of the function 1: function geek(value) {      return value+100;  }     console.log(geek(34));  2: function capitalize(str) {    return str.toUpperCase();  }     console.log(capitalize('geeks')); ............................. lamda function[anonymous function] doesnt have name Lambda functions are pure functions in Javascript. let multiply = (a, b) => a * b; console.log(multiply(5, 9)); const Names = [   'Mansi',   'Gaurav',   'Akansha',   'Sanya' ]; console.log(Names.map(Names => Names.length));   array.slice[parts the array] gives array returns The slice() method returns selected elements in an array, as a new array. The slice() method selects from a given start, up to a (not inclusive) given end. The slice() method does not change the origi...
Read more

reactnative_creation

-
 [EAS Build Service]:--for production Alternative:-- expo managed workflow:- expo go:-expo init projectname:-[built in feature] easy to setup and workflow quick &fictionless development no or very little congiguration you can build(cross-platform) standalone apps expo Bare workflow: [own native code android ] relatively easy to setup and work with convenient development some configuration required you can build(cross-platform) standalone apps [react native cli] setup:-- android studio jdk java setup xcode install react cli: more complex setup conveninent development can require more configuration effort standalone apps are build locally expo bare workflow:--- https://docs.expo.dev/versions/latest/sdk/location/ https://github.com/expo/expo/tree/sdk-51/packages/expo-location u can eject from managed expo  to bear workflow:-- just run  expo eject in terminal continue android package name:-com.companyname.domainname
Read more