آموزش CSS - تبدیلات 2 بعدی

تبدیلات 2 بعدی (2D transforms) برای بازسازی ساختار المان‌ها با استفاده از تغییراتی مانند جابجایی (translate)، چرخش (rotate)، مقیاس (scale) و خمیدگی (skew) استفاده می‌شوند.

جدول زیر حاوی مقادیر مشترکی است که در تبدیلات 2 بعدی استفاده می‌شوند −

ردیف	مقدار و توضیحات
1	ماتریس (n،n،n،n،n،n) (matrix) برای تعریف تبدیل ماتریس با شش مقدار استفاده می شود
2	انتقال (x،y) (translate) برای تبدیل المان در امتداد محور x و y استفاده می شود
3	انتقال در محور x (translateX) برای تبدیل المان در امتداد محور x استفاده می شود
4	انتقال در محور y (translateY) برای تبدیل المان در امتداد محور y استفاده می شود
5	مقیاس (x،y) (scale) برای تغییر پهنا و ارتفاع المان استفاده می شود
6	مقیاس در محور x (scaleX) برای تغییر پهنای المان استفاده می شود
7	مقیاس در محور y (scaleY) برای تغییر ارتفاع المان استفاده می شود
8	چرخش (زاویه) (rotate) برای چرخش المان بر اساس یک زاویه استفاده می شود
9	خم شدن در محور x (skewX) برای تعریف تبدیل خم شدن در امتداد محور x استفاده می شود
10	خم شدن در محور y (skewY) برای تعریف تبدیل خم شدن در امتداد محور y استفاده می شود

در ادامه، نمونه هایی از تمام ویژگی های بالا نشان داده شده است.

(Rotate) چرخش 20 درجه

(چرخش (Rotate این باکس با یک زاویه 20 درجه به شکل زیر نشان داده شده است -


<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
          example.com.
      </div>
      
      <div id = "myDiv">
         example.com
      </div>
   </body>
</html>

این نتیجه زیر را تولید می کند −

(Rotate) چرخش -20 درجه

(چرخش (Rotate این باکس با یک زاویه -20 درجه به شکل زیر نشان داده شده است -


<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         example.com
      </div>
      
      <div id = "myDiv">
      example.com
      </div>
   </body>
</html>

(Skew) انحراف محور X

(انحراف (Skew محور x این باکس به شکل زیر نشان داده شده است -


<html>
   <head>
      <style>
         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);
         }
      </style>
   </head>

   <body>
      <div>
         example.com
      </div>
      
      <div id = "skewDiv">
        example.com
      </div>
   </body>
</html>

(Skew) انحراف محور Y

(انحراف (Skew محور y این باکس به شکل زیر نشان داده شده است -


<html>
   <head>
      <style>
         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);
         }
      </style>
   </head>

   <body>
      <div>
      example.com
      </div>
      
      <div id = "skewDiv">
    example.com
      </div>
   </body>
</html>

این تبدیل ماتریس (Matrix transform) زیر را نشان می‌دهد −

تبدیل چرخش (Rotate) ۲۰ درجه

چرخش جعبه با زاویه ۲۰ درجه به شکل زیر نشان داده شده است −

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
     example.com
      </div>
      
      <div id = "myDiv1">
example.com
      </div>
   </body>
</html>

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
    example.com
      </div>
      
      <div id = "myDiv2">
     example.com
      </div>
   </body>
</html>

* تبریک میگم شما درس تبدیلات 2 بعدی را با موفقیت مطالعه کردید و به پایان رساندید ،حالا پیش به سوی درس بعدی و یادگیر بیشتر...

فونت های وب (Web Fonts) - درس قبلی

درس بعدی - تبدیلات 3 بعدی