Use the rotateX(angle) method to rotate transform the element by using x-axis with CSS3 −ExampleLive 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 */          }                              tutorialspoint.com             Rotate X-axis                tutorialspoint.com          

You can try to run the following code to rotate div with skew 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);          }                              Qries.com                      Qries.com          

The scaleX(x) method is used to scale transform the element using x-axis.Let us see the syntax −scaleX(x)Here, x is a number representing the scaling factor to apply on the abscissa of each point of the element.Let us see an example −div {    width: 60px;    height: 60px;    background-color: yellow; } .scaled {    transform: scaleX(0.5);    background-color: black; }

The scaleY(y) method is used to scale transform the element using y-axis.Let us see the syntax −scaleY(y)Here, y is a number representing the scaling factor to apply on the ordinate of each point of the element.Let us see an example −div {    width: 60px;    height: 60px;    background-color: yellow; } .scaled {    transform: scaleY(0.5);    background-color: black; }

To create rotate out up right animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOutUpRight {             0% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(90deg);                opacity: 0;             }          }          @keyframes rotateOutUpRight {             0% {                transform-origin: right bottom;                transform: rotate(0);                opacity: 1;             }             100% {                transform-origin: right bottom;                transform: rotate(90deg);                opacity: 0;             }          }          .rotateOutUpRight {             -webkit-animation-name: rotateOutUpRight;             animation-name: rotateOutUpRight;          }                           Reload page                function myFunction() {             location.reload();          }          

To create rotate out up left animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOutUpLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }          }          @keyframes rotateOutUpLeft {             0% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }             100% {                -transform-origin: left bottom;                -transform: rotate(-90deg);                opacity: 0;             }          }          .rotateOutUpLeft {             -webkit-animation-name: rotateOutUpLeft;             animation-name: rotateOutUpLeft;           }                           Reload page                       function myFunction() {              location.reload();           }          

To create rotate out downright animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateOutDownRight {             0% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(0);                opacity: 1;             }             100% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }          }          @keyframes rotateOutDownRight {             0% {                transform-origin: right bottom;                transform: rotate(0);                opacity: 1;             }             100% {                transform-origin: right bottom;                transform: rotate(-90deg);                opacity: 0;             }          }          .rotateOutDownRight {             -webkit-animation-name: rotateOutDownRight;             animation-name: rotateOutDownRight;          }                           Reload page                      function myFunction() {             location.reload();          }          

The CSS border-mage-source property is used to set the image path. You can try to run the following code to implement the border-image-source property:ExampleLive Demo                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image-source: url(https://tutorialspoint.com/css/images/border.png);             border-image-repeat: round;             border-image-slice: 50;          }                     This is image border example.    

In relative units, the length value is fixed and it appears the exact size of the element. Let us see the units:UnitsAbbreviationPercent%EmEmExExRoot emRemViewport widthVwViewport widthVhViewport widthVmCharacterChGridGd

CSS has several units for different units such as width, margin, padding, font-size, border-width, etc. The length indicates by using numerical value followed by length units such as px, dp, em, etc. It does not allow white spaces in between numerical values and length units.Length units divided as follows:relative unitsabsoluteAbsolute unitsUnitsAbbreviationPixelsPxPointsPtInchesInCentimetersCmPicasPcRelative UnitsIn relative units, the length value is fixed and it appears the exact size of the elementUnitsAbbreviationPercent%EmEmExExRoot emRemViewport widthVwViewport widthVhViewport widthVmCharacterChGridGd