CSS3 3D Transform – بخش دوم
305 روز پیش
پويا صادقى , آموزش CSS
سلام!
تو بخش اول آموزش استفاده از تابعهای 3D Transform ، تابعهای perspective ، translate3d ، translateZ ، transform-style و perspective-origin رو معرفی کردم؛ اینبار با توابع rotateX و rotateY کار میکنیم:
توابع rotateX و rotateY
این توابع مثل همون تابع rotate کار میکنن ولی برخلاف rotate ، المنت رو روی محورهای x و y میچرخونن. به شکل زیر توجه کنید:
در بخش اول این آموزش ، چهار تا div داشتیم ، توابع rotateX و rotateY رو روی div سوم و چهارم امتحان میکنیم:
rotateY: باکس d3 رو 40 درجه روی محور Y ها میچرخونیم:
.d3{transform:rotateY(40deg);-webkit-transform:rotateY(40deg);}
حالا باکس d3 رو 180 درجه روی محور Y میچرخونیم. درست مثل یک آینه تخت!
.d3{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);}
برای rotateX هم مثل rotateY مینویسیم:
.d4{transform:rotatex(40deg);-webkit-transform:rotatex(40deg);}
(البته من اینجا متن داخل d4 رو تغییر دادم 
)
.d4{transform:rotatex(180deg);-webkit-transform:rotatex(180deg);}
نوشته شده توسط پويا صادقى
سلام! من پویا صادقی هستم؛ طراح وب استاتیک ، CSS/HTML ، دانشجوی نرم افزار.
می تونید من رو در توییتر دنبال کنید، گالری من رو در deviantart ببینید،
یا با ایمیل info@Pasargad-Graphic.com تماس بگیرید.
