2019 September 20 - جمعه 29 شهرويور 1398
آموزش Css3 – قسمت ششم – ۲D Transforms
کد خبر: ١٩٣٣ تاریخ انتشار: ١٧ بهمن ١٣٩١ - ١٧:٥١ تعداد بازدید: 1760
آموزش Css3 – قسمت ششم – ۲D Transforms

سلام
امروز می خواهم در خصوص تغییر شکل و جابه جایی ۲ بعدی در سی اس اس ۳ برای شما بنویسم.
ما می توانیم توسط خاصیت transform اجزا صفحه وب خود را به اشکال مختلف تغییر بدهیم یا آنها را بچرخانیم.

سلام

امروز می خواهم در خصوص تغییر شکل و جابه جایی ۲ بعدی در سی اس اس ۳ برای شما بنویسم.

ما می توانیم توسط خاصیت transform اجزا صفحه وب خود را به اشکال مختلف تغییر بدهیم یا آنها را بچرخانیم.

همه مرورگرها از خاصیت transform پشتیبانی می کنند.

مرورگر IE9 پیشوند-ms- را لازم دارد.

مرورگر Firefox پیشوند -moz- را لازم دارد.

مرورگر Chrome و Safari پیشوند -webkit- را لازم دارد.

مرورگر Opera پیشوند -o- را لازم دارد.

در این مقاله راجع به حالتهای زیر صحبت می کنیم.

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

مثال ۱ :

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

در مثال بالا برای تگ Div خاصیت چرخش ۳۰ درجه ای که در همه مرورگرها هم درست عمل کند نوشته شده است.

تابع translate

تابع translate می تواند یک جزء از صفحه وب را به نقطه ای دیگر منتقل کند و محل جدید را بر اساس پیکسل از چپ و پیکسل از بالا بر اساس موقعیت فعلی تعیین می کند.

مثال ۲ :

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

در مثال بالا از تابع translate جهت انتقال استفاده شده است. translate(50px,100px) تعیین می کند که ۵۰ پیکسل از سمت چپ موقعیت فعلی و ۱۰۰ پیکسل از بالا باید انتقال انجام شود.

تابع rotate

با استفاده از تابع rotate ما می توانیم اجزاء صفحه وب را به دلخواه در جهت عقربه های ساعت و یا در خلاف جهت عقربه های ساعت بچرخانیم . پارامتر ورودی این تابع درجه چرخش می باشد.

مثال ۳ :

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

در مثال بالا تگ div به میزان ۳۰ درجه در جهت عقربه های ساعت چرخیده می شود. در صورتی که بخواهیم برعکس باشد کافی است از اعداد منفی استفاده کنیم.

تابع scale

با استفاده از تابع scale ما می توانیم اجزاء صفحه را کوچک یا بزرگ کنیم.این تابع میزان بزرگ شدن/کوچک شدن را برای طول و عرض دریافت کرده و آن را اعمال می کند.

مثال ۴ :

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

در مثال بالا مقدار عرض ۲ برابر مقدار فعلی و مقدار طول ۴ برابر مقدار فعلی خواهد شد.

تابع skew

با استفاده از تابع skew می توانیم یک جز را در صفحه وب بر اساس زاویه بچرخانیم. این مقادیر برای میزان زاویه عمودی و افقی خواهند بود.

مثال ۵ :

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

در مثال بالا ۳۰ درجه در زاویه X چرخش ایجاد می شود و ۲۰ درجه در زاویه Y چرخش ایجاد می گردد.

تابع matrix

تابع matrix در حقیقت تابعی است که می تواند همه کارهای توابع قبلی را انجام دهد.این تابع ۶ پارامتر دریافت می کند که بر اساس آن می تواند همه توانایی های توابع قبلی را داشته باشد.

مثال ۶ :

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

در مثال بالا با استفاده از تابع matrix تک div را ۳۰ درجه چرخانده ایم.

موفق باشید



Share
* نام:
ایمیل:
* نظر:

آخرین مطالب


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