051-38846027 021-44767960
09120248112 09367988112

آموزش css – تبدیل دو بعدی در css3 یا Transfroms

شما در سی اس اس با متد تبدیل دو بعدی در css3 می توانید عناصر اچ تی ام ال خود را بچرخانید، خم کنید،  بزرگ و کوچک کنید و یا بکشید.

آموزش  css – تبدیل دو بعدی در css3 یا Transfroms

و همچنین شما با خواندن این مطلب می توانید با پشتیبانی مرورگرها از ویژگی Transform آشنا شوید. به عنوان مثال :

فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد.

سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد.

اینترنت اکسپلورر ۹ برای این ویژگی نیاز به پیشوند -ms- دارد.

اوپرا برای این ویژگی نیاز به پیشوند -o- دارد.

()translate : با استفاده از متد ()translate المنت مورد نظر شما از مکان فعلی خود با استفاده از پارامتر ھایی که به آن برای چپ (محور x ) و بالا (محور y ) داده میشود حرکت میکند .

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 */
}

transform_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 */
}

transform_rotate

مقدار (rotate(30deg المنت را ۳۰ درجه در جھت عقربه ھای ساعت می چرخاند .

()scale : با استفاده از ()scale میتوانید اندازه یک المنت را زیاد و کم کنید . مقدار آن بستگی به پارامتر ھایی دارد که به عنوان عرض (محور x ) و عرض (محور y ) به آن می دھید.

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 */
}

transform_scale

مقدار (scale(2,4 یعنی عرض آن دو برابر اندازه اصلی و ارتفاع آن ۴ برابر شود .

()skew : با متد ()skew  شما میتوانید المنت را با دادن درجه بچرخانید ، میزان چرخش بستگی به پارامتر ھای عمودی (محور x ) و افقی (محور y ) دارد.

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 */
}

 transform_skew

 

 

 

مقدار (skew(30deg,20deg المنت را ۳۰ درجه حول محور x و ۲۰ درجه حول محور y می چرخاند.

()matrix : متد ()matrix دربردارنده تمامی تبدیل ھای دو بعدی است . متد ()matrix دارای شش پارامتر است ، حاوی توابع ریاضی ، که به شما اجازه میدھد بچرخانید ، بزرگ یا کوچک کنید ، حرکت دھید ، یا آن را کج (خم) کنید . نحوه چرخاندن المنت div با استفاده از متد ماتریکس :

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 */
}

transform_matrix

اشتراک کذاری در :
به این مطلب امتیاز دهید :
1 امتیاز2 امتیاز3 امتیاز4 امتیاز5 امتیاز
Loading...

چک کردن سئو

آموزش css – انیمیشن و متحرک سازی اجزا با CSS

سوالات متداول

توس وب تضمین میکند مطابق با مفاد قرارداد رسمی که درابتدا, متناسب با نیاز مشتری تنظیم شده عمل نماید (تحویل به موقع – پشتیبانی پس از تحویل – رعایت استاندارد های جهانی)

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

طراحی اختصاصی توسط تیم حرفه ای و بدون استفاده از قالب های آماده و با رعایت استانداردهای جهانی وب

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله – پس از طراحی فایل های آموزشی به صورت متنی یا ویدئویی در اختیار شما قرار می گیرد.

خیر، کارکردن با سایت بسیار آسان است، زیرا پنل تنظیمات و مدیریت سایت کاملاً فارسی بوده و آموزش کامل آن در اختیار مشتری قرار می گیرد.

توس وب از بروزترین تکنولوژی های مورد استفاده در وب از قبیل PHP,HTML5,CSS3,Java Script,Bootstrap استفاده می کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

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

پاسخ این سوال را می توان در چند جمله اینگونه بیان کرد :

پشتیبانی حرفه ای – طراحی متناسب با سلیقه و نیازهای مشتری – حجم کم کدنویسی پائین و سرعت لود بالا

با توجه به نوع وبسایت و امکانات آن بین ۲۵ تا ۶۰ روز متغیر می باشد.

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

ساماندهی
خانواده توس وب
خوشحالیم که افتخار همراهی شما عزیران را داریم