CSS { Cascading Style Sheets }: CSS3 { 2D Transformation }

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew

The following table has contained common values which are used in 2D transforms

Example : [ Rotate Transform ]

<html>
   <head>

<style>
         div {
            width: 200px;
            height: 100px;
            background-color: black;
            border: 3px solid black;
         }

         div#rotate {
            /* IE 9 */
            -ms-transform: rotate(20deg);

            /* Safari */
            -webkit-transform: rotate(20deg);

            /* Standard syntax */
            transform: rotate(20deg);
         }

    div#rotate_diff {
            /* IE 9 */
            -ms-transform: rotate(-20deg);

            /* Safari */
            -webkit-transform: rotate(-20deg);

            /* Standard syntax */
            transform: rotate(-20deg);
         }

</style>

</head>
   <body>

      <div>
      <span style="Color:white">CSS # Simple </span>
      </div>
<br/><br/>
      <div id="rotate">
      <span style="Color:white">CSS # rotate(20deg);</span>
      </div>
<br/><br/><br/><br/>
      <div id="rotate_diff">
      <span style="Color:white">CSS # rotate(-20deg);</span>
      </div>

   </body>
</html>

Output :

Example : [ Skew Axis ]
<html>
   <head>

<style>
         div {
            width: 200px;
            height: 100px;
            background-color: black;
            border: 3px solid black;
         }

         div#skewXDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg);

            /* Safari */
            -webkit-transform: skewX(20deg);

            /* Standard syntax */
            transform: skewX(20deg);
         }

       div#skewYDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg);

            /* Safari */
            -webkit-transform: skewY(20deg);

            /* Standard syntax */
            transform: skewY(20deg);
         }

</style>

</head>
   <body>

      <div>
      <span style="Color:white">CSS # Simple </span>
      </div>
<br/><br/>
      <div id="skewXDiv">
      <span style="Color:white">CSS # Skew X Axis</span>
      </div>
<br/><br/><br/><br/>
      <div id="skewYDiv">
      <span style="Color:white">CSS # Skew Y Axis</span>
      </div>

   </body>
</html>

Output :

CSS { Cascading Style Sheets }

18 September 2016

CSS3 { 2D Transformation }

No comments:

Post a Comment