Front End Technology Articles - Page 652 of 860

You can try to run the following code to define skew transforms along with y-axis using CSS −ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewY(20deg);                         /* Safari */             -webkit-transform: skewY(20deg);                         /* Standard syntax */             transform: skewY(20deg);          }                              Tutorials point.com.                      Tutorials point.com           Output

You can try to run the following code to implement skew transforms along with x-axis using CSS −ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewX(20deg);                        /* Safari */            - webkit-transform: skewX(20deg);                        /* Standard syntax */            transform: skewX(20deg);         }                              Tutorials point.com.                      Tutorials point.com           Output

Let us learn how to rotate the element based on an angleExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv {             /* IE 9 */             -ms-transform: rotate(20deg);                         /* Safari */             -webkit-transform: rotate(20deg);                         /* Standard syntax */             transform: rotate(20deg);          }                              Tutorials point.com.                      Tutorials point.com           Output

Use the scaleY() method to change the height of the element with CSS.Let us see the syntax −scaleY(n);Here, n is a number representing the scaling factor.Let us see an example −div {    width: 40px;    height: 50px;    background-color: black; } .myScaled {    transform: scaleY(0.9);    background-color: orange; }

Used to translateY(n) method to transform the element along with y-axis.Let us see the syntax:translateY(n)Here, n is a length representing the abscissa of the translating vector.ExampleLet us see an example −div {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateY(20px);    background-color: orange; }

Use the translateX(n) method to transform the element along with x-axis.Let us see the syntaxtranslateX(n)Here, n is a length representing the abscissa of the translating vector.Let us see an examplediv {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateX(20px);    background-color: orange; }

Use the translate(x,y) method to transform the element along with x-axis and y-axis.Let us see the syntaxtranslate(x,y)Here, x is a length representing the x-coordinate of the translating vector.y is a length representing the ordinate of the translating vectorLet us see an examplediv {    width: 50px;    height: 50px;    background-color: orange; } .trans {    transform: translate(20px);    background-color: black; }

The multi-column rule-style property is used to specify the style rule for the column. You can try to run the following code to implement rule-style property using CSS −ExampleLive Demo                    .multi {             /* Column count property */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;                         /* Column gap property */             ... Read More

The multi-column rule-width property is used to specify the column width. You can try to run the following code to implement rule-width property using CSS:ExampleLive Demo                    .multi {             /* Column count property */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;                         /* Column gap property */             -webkit-column-gap: 40px;     ... Read More

You can try to run the following code to matrix transform in another direction with CSS:ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv2 {             /* IE 9 */             -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);             /* Safari */             -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);             /* Standard syntax */             transform: matrix(1, 0, 0.5, 1, 150, 0);          }                              Tutorialspoint.com                      Tutorialspoint.com           Output