Front End Technology Articles - Page 655 of 860

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

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.ExampleYou can try to run the following code to implement linear gradients in CSS3 −Live Demo                    #grad1 {             height: 100px;             background: -webkit-linear-gradient(pink,green);             background: -o-linear-gradient(pink,green);             background: -moz-linear-gradient(pink,green);             background: linear-gradient(pink,green);          }                                

The opacity is a thinner paints need black added to increase opacity. The following example shows CSS3 Opacity property − Example Live Demo #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {background-color:rgb(0,0,255);opacity:0.6;} HSLA colors: Red Green Blue

HSLA stands for hue, saturation, lightness, and alpha. The alpha value specifies the opacity as shown RGBA.ExampleThe following example shows HSLA color property −Live Demo                    #d1 {background-color:hsla(120,100%,50%,0.3);}          #d2 {background-color:hsla(120,100%,75%,0.3);}          #d3 {background-color:hsla(120,100%,25%,0.3);}                     HSLA colors:       Less opacity green       Green       Green    

Use the rotate(angle) method to rotate transform the element using y-axis with CSS3 −ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#yDiv {             -webkit-transform: rotateY(150deg);             /* Safari */             transform: rotateY(150deg);             /* Standard syntax */          }                              tutorials point.com                Rotate Y axis                tutorials point.com.          

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();          }