آموزش تبدیل سه بعدی در CSS3

4 سال پیش

امتیاز دهید post

آموزش تبدیل سه بعدی در CSS3

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

با استفاده از تبدیل 3D ، می توانیم عنصر را به محور x ، محور y و محور z منتقل کنیم ، در زیر مثال نحوه چرخش عنصر را به وضوح مشخص می کند.

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

روش های زیر برای فراخوانی تبدیل 3D استفاده می شوند –

matrix3d (n ، n ، n ، n ، n ، n ، n ، n ، n ، n ، n ، n ، n ، n ، n ، n)

برای تبدیل عنصر با استفاده از 16 مقدار ماتریس استفاده می شود

translate3d(x,y,z)

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

translateX(x)

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

translateY(y)

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

translateZ(z)

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

scaleX(x)

برای تبدیل مقیاس با استفاده از محور x مورد استفاده قرار می گیرد

scaleY(y)

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

scaleY(y)

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

scaleY(y)

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

rotateY(angle)

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

rotateZ(angle)

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

تبدیل سه بعدی محورهای X

مثالی که در زیر آورده شده است، تبدیلات سه بعدی محور x را نشان می دهد

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg); 
            
            /* Safari */
            transform: rotateX(150deg); 
            
            /* Standard syntax */
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;div&gt;
         tutorials point.com
      &lt;/div&gt;
      
      &lt;p&gt;Rotate X-axis&lt;/p&gt;
      
      &lt;div id = "myDiv"&gt;
         tutorials point.com.
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

div {

width: 200px;

height: 100px;

background-color: pink;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateX(150deg);

/* Safari */

transform: rotateX(150deg);

/* Standard syntax */

}

</style>

</head>

<body>

<div>

tutorials point.com

</div>

<p>Rotate X-axis</p>

tutorials point.com.

</div>

</body>

</html>

تبدیل سه بعدی محور Y

مثالی که در زیر مشاهده می کنید، تبدیلات سه بعدی محور Y را نشان می دهد –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 
            
            /* Safari */
            transform: rotateY(150deg); 
            
            /* Standard syntax */
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;div&gt;
         tutorials point.com
      &lt;/div&gt;
      
      &lt;p&gt;Rotate Y axis&lt;/p&gt;
      
      &lt;div id = "yDiv"&gt;
         tutorials point.com.
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

div {

width: 200px;

height: 100px;

background-color: pink;

border: 1px solid black;

}

div#yDiv {

-webkit-transform: rotateY(150deg);

/* Safari */

transform: rotateY(150deg);

/* Standard syntax */

}

</style>

</head>

<body>

<div>

tutorials point.com

</div>

<p>Rotate Y axis</p>

tutorials point.com.

</div>

</body>

</html>

تبدیل سه بعدی محور Z

مثال زیر تبدیل های 3D محور Z را نشان می دهد –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Standard syntax */
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div&gt;
         tutorials point.com
      &lt;/div&gt;
      
      &lt;p&gt;rotate Z axis&lt;/p&gt;
      
      &lt;div id = "zDiv"&gt;
         tutorials point.com.
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

div {

width: 200px;

height: 100px;

background-color: pink;

border: 1px solid black;

}

div#zDiv {

-webkit-transform: rotateZ(90deg);

/* Safari */

transform: rotateZ(90deg);

/* Standard syntax */

}

</style>

</head>

<body>

<div>

tutorials point.com

</div>

<p>rotate Z axis</p>

tutorials point.com.

</div>

</body>

</html>

منبع.

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

امتیاز دهید post

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

آموزش تبدیل سه بعدی در CSS3

آموزش تبدیل سه بعدی در CSS3

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

تبدیل سه بعدی محورهای X

تبدیل سه بعدی محور Y

تبدیل سه بعدی محور Z

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

دیدگاه شما

بدون دیدگاه

آموزش تبدیل سه بعدی در CSS3

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

تبدیل سه بعدی محورهای X

تبدیل سه بعدی محور Y

تبدیل سه بعدی محور Z

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

دیدگاه شما

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

بدون دیدگاه