Webhosting in Pakistan
Results 1 to 10 of 10

Thread: CSS transform Property

  1. #1
    Mani_Programmer's Avatar
    Mani_Programmer is offline Junior Member
    Last Online
    26th April 2019 @ 06:04 PM
    Join Date
    20 Feb 2019
    Gender
    Male
    Posts
    19
    Threads
    3
    Credits
    158
    Thanked
    2

    Thumbs up CSS transform Property

    Webhosting in Pakistan
    Definition and Usage
    The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
    To better understand the transform property.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div.a {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: rotate(20deg); /* IE 9 */
      -webkit-transform: rotate(20deg); /* Safari 3-8 */
      transform: rotate(20deg);
    }
    
    div.b {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: skewY(20deg); /* IE 9 */
      -webkit-transform: skewY(20deg); /* Safari 3-8 */
      transform: skewY(20deg);
    }
    
    div.c {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: scaleY(1.5); /* IE 9 */
      -webkit-transform: scaleY(1.5); /* Safari 3-8 */
      transform: scaleY(1.5);
    }
    </style>
    </head>
    <body>
    
    <h1>The transform Property</h1>
    
    <h2>transform: rotate(20deg):</h2>
    <div class="a">Hello World!</div>
    <br>
    
    <h2>transform: skewY(20deg):</h2>
    <div class="b">Hello World!</div>
    <br>
    
    <h2>transform: scaleY(1.5):</h2>
    <div class="c">Hello World!</div>
    
    </body>
    </html>
    Source: w3schools

  2. #2
    Join Date
    09 Apr 2009
    Location
    کر&
    Gender
    Male
    Posts
    16,054
    Threads
    255
    Credits
    22,834
    Thanked
    1794

    Default

    شکریہ برادر اس آگاہی کو ہمارے ساتھ شئیر کرنے کا
    امید کی جاتی ہے کہ آپ مذید علم بھی ہمارے ساتھ شئیر کرتے رہیں گے

  3. #3
    leezuka389's Avatar
    leezuka389 is offline Advance Member
    Last Online
    1st June 2020 @ 04:26 PM
    Join Date
    04 Nov 2015
    Gender
    Male
    Posts
    4,709
    Threads
    33
    Credits
    24,741
    Thanked
    267

    Default

    [QUOTE=Mani_Programmer;5935584]Definition and Usage
    The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
    To better understand the transform property.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div.a {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: rotate(20deg); /* IE 9 */
      -webkit-transform: rotate(20deg); /* Safari 3-8 */
      transform: rotate(20deg);
    }
    
    div.b {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: skewY(20deg); /* IE 9 */
      -webkit-transform: skewY(20deg); /* Safari 3-8 */
      transform: skewY(20deg);
    }
    
    div.c {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: scaleY(1.5); /* IE 9 */
      -webkit-transform: scaleY(1.5); /* Safari 3-8 */
      transform: scaleY(1.5);
    }
    </style>
    </head>
    <body>
    
    <h1>The transform Property</h1>
    
    <h2>transform: rotate(20deg):</h2>
    <div class="a">Hello World!</div>
    <br>
    
    <h2>transform: skewY(20deg):</h2>
    <div class="b">Hello World!</div>
    <br>
    
    <h2>transform: scaleY(1.5):</h2>
    <div class="c">Hello World!</div>
    
    </body>
    </html>
    Source: w3schools
    [/QUOTE



    nice sharing janab

  4. #4
    Mani_Programmer's Avatar
    Mani_Programmer is offline Junior Member
    Last Online
    26th April 2019 @ 06:04 PM
    Join Date
    20 Feb 2019
    Gender
    Male
    Posts
    19
    Threads
    3
    Credits
    158
    Thanked
    2

    Default

    Quote Haseeb Alamgir said: View Post
    شکریہ برادر اس آگاہی کو ہمارے ساتھ شئیر کرنے کا
    امید کی جاتی ہے کہ آپ مذید علم بھی ہمارے ساتھ شئیر کرتے رہیں گے
    Thanks

  5. #5
    Mani_Programmer's Avatar
    Mani_Programmer is offline Junior Member
    Last Online
    26th April 2019 @ 06:04 PM
    Join Date
    20 Feb 2019
    Gender
    Male
    Posts
    19
    Threads
    3
    Credits
    158
    Thanked
    2

    Default

    [QUOTE=leezuka389;5935611]
    Quote Mani_Programmer said: View Post
    Definition and Usage
    The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
    To better understand the transform property.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div.a {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: rotate(20deg); /* IE 9 */
      -webkit-transform: rotate(20deg); /* Safari 3-8 */
      transform: rotate(20deg);
    }
    
    div.b {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: skewY(20deg); /* IE 9 */
      -webkit-transform: skewY(20deg); /* Safari 3-8 */
      transform: skewY(20deg);
    }
    
    div.c {
      width: 150px;
      height: 80px;
      background-color: yellow;
      -ms-transform: scaleY(1.5); /* IE 9 */
      -webkit-transform: scaleY(1.5); /* Safari 3-8 */
      transform: scaleY(1.5);
    }
    </style>
    </head>
    <body>
    
    <h1>The transform Property</h1>
    
    <h2>transform: rotate(20deg):</h2>
    <div class="a">Hello World!</div>
    <br>
    
    <h2>transform: skewY(20deg):</h2>
    <div class="b">Hello World!</div>
    <br>
    
    <h2>transform: scaleY(1.5):</h2>
    <div class="c">Hello World!</div>
    
    </body>
    </html>
    Source: w3schools
    [/QUOTE



    nice sharing janab

    Thanks

  6. #6
    Mani_Programmer's Avatar
    Mani_Programmer is offline Junior Member
    Last Online
    26th April 2019 @ 06:04 PM
    Join Date
    20 Feb 2019
    Gender
    Male
    Posts
    19
    Threads
    3
    Credits
    158
    Thanked
    2

    Default

    Results:

  7. The Following User Says Thank You to Mani_Programmer For This Useful Post:

    Haseeb Alamgir (22nd February 2019)

  8. #7
    Join Date
    09 Apr 2009
    Location
    کر&
    Gender
    Male
    Posts
    16,054
    Threads
    255
    Credits
    22,834
    Thanked
    1794

    Default

    Quote Mani_Programmer said: View Post
    Results:
    ریپلائی کرنے کا بہت شکریہ ہماری طرف سے
    پا
    آپ کا صرف
    شکریہ
    نہیں چلے گا
    اگلی شئیرینگ بھی درکار ہے

  9. #8
    Mani_Programmer's Avatar
    Mani_Programmer is offline Junior Member
    Last Online
    26th April 2019 @ 06:04 PM
    Join Date
    20 Feb 2019
    Gender
    Male
    Posts
    19
    Threads
    3
    Credits
    158
    Thanked
    2

    Default

    Zror

  10. #9
    Alone Men's Avatar
    Alone Men is offline Senior Member+
    Last Online
    30th July 2019 @ 09:07 PM
    Join Date
    28 Jun 2019
    Location
    G-9/2,Islamabad
    Age
    34
    Gender
    Male
    Posts
    228
    Threads
    21
    Credits
    1,266
    Thanked
    25

    Default


    بہت ہی شاندار شیرینگ ہے
    اچھی شیرینگ کے لیے اپ کی مہربانی

  11. #10
    zahra098's Avatar
    zahra098 is offline Senior Member+
    Last Online
    22nd August 2019 @ 04:20 PM
    Join Date
    01 Dec 2017
    Age
    28
    Gender
    Male
    Posts
    306
    Threads
    12
    Credits
    1,383
    Thanked
    7

    Default

    Webhosting in Pakistan
    thanks for sharing its amazing one keep posting really appreciated thanks

Similar Threads

  1. general knowledge about property
    By faizan374 in forum General Knowledge
    Replies: 3
    Last Post: 30th April 2016, 10:35 PM
  2. Hide Property of My computer
    By naseer grt in forum Tips and Tricks
    Replies: 16
    Last Post: 3rd August 2014, 03:41 PM
  3. Property of MAFIA
    By meerirfan in forum Photo Gallery
    Replies: 8
    Last Post: 20th April 2010, 06:23 PM
  4. change my omputer property
    By Maher143 in forum Ask an Expert
    Replies: 9
    Last Post: 5th August 2009, 04:16 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •