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

    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
    KARACHI&
    Gender
    Male
    Posts
    19,307
    Threads
    412
    Credits
    39,753
    Thanked
    1813

    Default

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

  3. #3
    leezuka389's Avatar
    leezuka389 is offline Advance Member
    Last Online
    9th August 2023 @ 04:14 PM
    Join Date
    04 Nov 2015
    Gender
    Male
    Posts
    6,596
    Threads
    39
    Credits
    56,449
    Thanked
    294

    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. #7
    Join Date
    09 Apr 2009
    Location
    KARACHI&
    Gender
    Male
    Posts
    19,307
    Threads
    412
    Credits
    39,753
    Thanked
    1813

    Default

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

  8. #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

  9. #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
    38
    Gender
    Male
    Posts
    228
    Threads
    21
    Credits
    1,266
    Thanked
    25

    Default


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

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

    Default

    thanks for sharing its amazing one keep posting really appreciated thanks
    any site link is not allowed in signatures.

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
  •