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

saber

4 سال پیش

امتیاز دهید post

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

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

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

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

(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 استفاده می شود

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

چرخش 20 درجه

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

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

   &lt;body&gt;
      &lt;div&gt;
         Tutorials point.com.
      &lt;/div&gt;
      
      &lt;div id = "myDiv"&gt;
         Tutorials point.com
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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>

Tutorials point.com

</div>

</body>

</html>

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

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

   &lt;body&gt;
      &lt;div&gt;
         Tutorials point.com.
      &lt;/div&gt;
      
      &lt;div id = "myDiv"&gt;
         Tutorials point.com
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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>

Tutorials point.com

</div>

</body>

</html>

محور X کج

چرخش جعبه با محور x کج مانند تصویر زیر –

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

   &lt;body&gt;
      &lt;div&gt;
         Tutorials point.com.
      &lt;/div&gt;
      
      &lt;div id = "skewDiv"&gt;
         Tutorials point.com
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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>

Tutorials point.com

</div>

</body>

</html>

محور Y کج

چرخش جعبه با محور y کج به صورت زیر:

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

   &lt;body&gt;
      &lt;div&gt;
         Tutorials point.com.
      &lt;/div&gt;
      
      &lt;div id = "skewDiv"&gt;
         Tutorials point.com
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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>

Tutorials point.com

</div>

</body>

</html>

تبدیل ماتریس

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

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

   &lt;body&gt;
      &lt;div&gt;
         Tutorials point.com.
      &lt;/div&gt;
      
      &lt;div id = "myDiv1"&gt;
         Tutorials point.com
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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>

Tutorials point.com

</div>

</body>

</html>

ماتریس با جهت دیگری تغییر شکل می دهد.

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

   &lt;body&gt;
      &lt;div&gt;
         Tutorials point.com.
      &lt;/div&gt;
      
      &lt;div id = "myDiv2"&gt;
         Tutorials point.com
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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>

Tutorials point.com

</div>

</body>

</html>

منبع.

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

امتیاز دهید post

برچسب ها : آموزش CSS آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

چرخش 20 درجه

محور X کج

محور Y کج

تبدیل ماتریس

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

دیدگاه شما

بدون دیدگاه

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

چرخش 20 درجه

محور X کج

محور Y کج

تبدیل ماتریس

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه