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

Using with 3d transforms, we can move element to x-axis, y-axis and z-axis.ExampleThe following an example shows the x-axis 3D transformsLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv {             -webkit-transform: rotateX(150deg);             /* Safari */             transform: rotateX(150deg);             /* Standard syntax */          }                              My website                      Rotate X-axis                      My website           Output

You can try to run the following code to implement Z-axis 3D transform with CSS3:ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#zDiv {             -webkit-transform: rotateZ(90deg);             /* Safari */             transform: rotateZ(90deg);             /* Standard syntax */          }                     rotate Z axis                tutorialspoint.com.           Output

Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid Selector:Live Demo                    input:valid {             background: red;             color: white;          }                     Heading             The style (red color background) appears if you type a relevant/ valid email address.     Output

Use the CSS :hover selector to style links on mouse over with CSS. You can try to run the following code to implement the :hover selector −ExampleLive Demo                    a:hover {             background-color: orange;          }                     Qries       Keep the mouse cursor on the above link and see the effect.    

To select the element that has focus, use the: focus selector. You can try to run the following code to implement the: focus selector −Example                    input:focus {             background-color: green;          }                              Subject          Student:          Age:

Use the :focus selector to select the element that has focus. You can try to run the following code to implement the :focus selectorExample                    input:focus {             background-color: green;          }                              Subject          Student:          Age:                    

The column-span property is used to specify the span between columns. You can try to run the following code to implement column-span property using CSS −Example Live Demo    .multi {       /* Column count property */       -webkit-column-count: 4;       -moz-column-count: 4;       column-count: 4;       /* Column gap property */       -webkit-column-gap: 40px;       -moz-column-gap: 40px;       column-gap: 40px;       /* Column style property */       column-rule-style: solid;       column-rule-color: #ff00ff;   ... Read More

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

The multi-column column-gap property is used to decide the gap between the columns.ExampleYou can try to run the following code to implement column-gap propertyLive 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