شنبه ۴ اسفند ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

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

استفاده از تبدیلات 3 بعدی (3d transforms)، به ما امکان می‌دهد که المان را در محور x، y و z حرکت دهیم. در زیر مثالی آورده شده که به صورت واضح نشان می‌دهد المان چگونه چرخش پیدا می‌کند.

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

روش‌های زیر برای فراخوانی تبدیلات 3 بعدی (3D transforms) استفاده می‌شوند −

شماره مقدار و توضیحات
1

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

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

translate3d(x,y,z)

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

translateX(x)

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

translateY(y)

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

translateZ(z)

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

scaleX(x)

برای اندازه‌گیری تبدیل المان با استفاده از محور x استفاده می‌شود
7

scaleY(y)

برای اندازه‌گیری تبدیل المان با استفاده از محور y استفاده می‌شود
8

scaleZ(z)

برای اندازه‌گیری تبدیل المان با استفاده از محور z استفاده می‌شود
9

rotateX(angle)

برای چرخش المان با استفاده از محور x استفاده می‌شود
10

rotateY(angle)

برای چرخش المان با استفاده از محور y استفاده می‌شود
11

rotateZ(angle)

برای چرخش المان با استفاده از محور z استفاده می‌شود

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


<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>
         example.com
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "myDiv">
          example.com
      </div>
      
   </body>
</html>

تحولات ۳بعدی در محور Y

مثال زیر نحوه استفاده از تحولات ۳بعدی در محور Y را نشان می‌دهد −


<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>
          example.com
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "yDiv">
      example.com
      </div>
      
   </body>
</html>

تحولات ۳بعدی در محور Z

مثال زیر نحوه استفاده از تحولات ۳بعدی در محور Z را نشان می‌دهد −


<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>
          example.com
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
          example.com
      </div>
   </body>
</html>

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

  تبدیلات 2 بعدی - درس قبلی
درس بعدی - انیمیشن