تبلیغات متنی و بنر

آموزش CSS 3  >  افکت های 3D در CSS 3  > متد ( ) rotateY

متد ( ) rotateY :

به وسیله متد ( ) rotateY می توانید عنصر مورد نظر خود را بر حول محور Y آن ، به میزان درجه تعیین کرده ، بچرخانید .
این کار باعث ایجاد یک افکت سه بعدی می شود .
نکته : این متد زیر مجموعه متد ( ) transform است .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax transform : rotateY ( deg ) ;
مثال : transform : rotateY ( 45deg ) ;

syntax توضیح هر یک از موارد
توضیح پارامتر
تعیین کننده میزان درجه چرخش عنصر بر حول محور Y آن است . واحد این پارامتر از 0 تا 360 درجه است .
تعیین این پارامتر اجباری است . 		deg

پشتیانی در مرورگر های مختلف ::

مرورگرهای کروم و فایرفاکس در حال حاضر از این خاصیت پشتیبانی می کنند ، ولی اپرا و اکسپلورر خیر .

کد لازم برای پشتیانی نوع مرورگر
باید کد آن را به صورت ( moz-transform: rotateY ( deg- نوشته شود .
پشتیانی نمی شود .
پشتیانی نمی شود .
باید کد آن را به صورت ( webkit-transform: rotateY ( deg- نوشته شود .

مثال عملی :

در مثال زیر یک تصویر داریم . هنگامی که موس بر روی آن می رود ، 180 درجه حول محور  Y خود میچرخد :
دقت کنید در اپرا و اکسپلورر کار نمی کند .

<!DOCTYPE html>
<html>
   <head>
       <style>
          #img1:hover
               {
                     transform:rotateY(180deg);
                     -webkit-transform:rotateY(180deg); /* Safari and Chrome */
                     -moz-transform:rotateY(180deg); /* Firefox */
                }
        </style>
    </head>
<body>
   < img  id="img1"   src="../Pic/Icons/CSS_3.jpg" />
</html> 		کد
خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟