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

You can try to run the following code to rotate div with matrix transforms using CSS:ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv1 {             /* IE 9 */             -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);             /* Safari */             -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);             /* Standard syntax */             transform: matrix(1, -0.3, 0, 1, 0, 0);          }                              Welcome to my website.                      Welcome to my website.           Output

You can try to run the following code to rotate div to -20 degrees angle with CSS − Example Live 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

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 transformsS.NoValues & Description1matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values2translate(x, y)Used to transforms the element along with x-axis and y-axis3translateX(n)Used to transforms the element along with x-axis4translateY(n)Used to transforms the element along with y-axis5scale(x, y)Used to change the width and height of element6scaleX(n)Used to change the width of element7scaleY(n)Used to change the height of element8rotate(angle)Used to rotate the element based on an angle9skewX(angle)Used to defines skew transforms along with ... Read More

Web fonts are used to allow the fonts in CSS, which are not installed on a local system. ExampleThe following code shows the sample code of font face:Live Demo                    @font-face {             font-family: myFirstFont;             src: url(/css/font/SansationLight.woff);          }          div {             font-family: myFirstFont;          }                     This is the example of font face with CSS3.       Original Text :This is the example of font face with CSS3.     Output

Use the word-wrap property to break the line and wrap onto next line. You can try to run the following code to implement a word-wrap property in CSSExampleLive Demo                    div {             width: 200px;             border: 2px solid #000000;          }          div.b {             word-wrap: break-word;          }                     word-wrap: break-word property       ThisisdemotextThisisdemotext:       thisisaveryveryveryveryveryverylongword.       The long word wraps to the next line.     Output