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

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

متد ( ) rotate3d :

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

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

Syntax transform : rotate3d (x,y,z, deg ) ;
مثال : transform : rotate3d ( 1,1,1,90deg ) ;

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

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

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

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

مثال عملی :

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

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

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

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

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

نام :               
آدرس Email :  

نظر شما :  

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