آموزش تبدیل ۲d در CSS3 

erfan molaei
3 سال پیش
آموزش تبدیل 2d در CSS3

آموزش تبدیل ۲d در CSS3 

 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تبدیل ۲d در CSS3 خواهیم پرداخت.

تبدیل ۲D برای تغییر ساختار عنصر به عنوان ترجمه، چرخش، مقیاس و انحراف استفاده می شود.

 

در زیر حاوی مقادیر مشترکی است که در تبدیل ۲D استفاده می شود –

 

  • (matrix(n,n,n,n,n,n

برای تعریف تبدیل ماتریس با شش مقدار استفاده می شود

  • (translate(x,y

برای تبدیل عنصر همراه با محور x و y استفاده می شود

  • (translateX(n

برای تبدیل عنصر همراه با محور x استفاده می شود

  • (translateY(n

برای تبدیل عنصر همراه با محور y استفاده می شود

  • (translateY(n

برای تغییر عرض و ارتفاع عنصر استفاده می شود

  • (scaleX(n

برای تغییر عرض عنصر استفاده می شود

  • (scaleY(n

برای تغییر ارتفاع عنصر استفاده می شود

  • (rotate(angle

برای چرخش عنصر بر اساس یک زاویه استفاده می شود

  • (skewX(angle

برای تعریف تبدیل های انحرافی همراه با محور x استفاده می شود

  • (skewY(angle

برای تعریف تبدیل های انحرافی همراه با محور y استفاده می شود

 

نمونه های زیر نمونه تمام خصوصیات فوق را نشان می دهد.

 

چرخش ۲۰ درجه

چرخش جعبه با زاویه ۲۰ درجه همانطور که در زیر نشان داده شده است –

<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>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

 

چرخش ۲۰- درجه
چرخش جعبه با زاویه ۲۰- درجه همانطور که در زیر نشان داده شده است –

<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>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

 

محور X کج

چرخش جعبه با محور 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>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

 

محور Y کج

چرخش جعبه با محور 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>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

 

تبدیل ماتریس

چرخش جعبه با تبدیل ماتریس همانطور که در زیر نشان داده شده است –

<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>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.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>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

 

منبع.

لیست جلسات قبل آموزش CSS

  1. آموزش CSS
  2. CSS چیست؟
  3. آموزش نحو CSS
  4. آموزش قوانین CSS 
  5. آموزش واحد انداره گیری در CSS
  6. آموزش رنگ ها در CSS
  7. آموزش Background در CSS
  8. آموزش فونت ها در CSS
  9. آموزش استفاده از تصاویر در CSS 
  10. آموزش استفاده از تصاویر در CSS 
  11. آموزش استفاده از لینک ها در CSS 
  12. آموزش جداول در CSS 
  13. آموزش حاشیه در CSS 
  14. آموزش margin در CSS
  15. آموزش لیست ها در CSS
  16. آمورش ویژگی padding در CSS
  17. آموزش ویژگی مکان نما در CSS 
  18. آموزش outline در CSS 
  19. آموزش ابعاد در CSS 
  20. آموزش نوارهای پیمایشی در CSS
  21. آموزش visibility در CSS
  22.  آموزش موقعیت یابی در  CSS 
  23. آموزش لایه ها در CSS 
  24. آموزش شبه کلاس ها در CSS 
  25. آموزش شبه عناصر در CSS
  26.  آموزش قوانین @ در CSS 
  27. آموزش فیلترهای متنی و تصویری در CSS 
  28. آموزش انواع رسانه ها در CSS 
  29. آموزش مدیا صفحه در CSS
  30. آموزش رسانه شنیداری در CSS
  31. آموزش چاپ در CSS 
  32. آموزش طرح بندی در CSS 
  33. آموزش CSS3
  34. آموزش گرد کردن گوشه ها در CSS3 
  35. آموزش حاشیه تصویر CSS3 
  36. آموزش تنظیم چند پس زمینه در CSS3  
  37. رنگ ها در CSS3 
  38. آموزش گرادیان در CSS3
  39.  آموزش سایه در CSS3 
  40.  آموزش تکست در CSS3
  41. آموزش فونت های وب در CSS3 
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه