خاصیت transform
شما میتوانید با استفاده از خاصیت transform بر روی عناصر جلوه ھای ویژه ای را اعمال کنید ( در آخر خواھیم آموخت چگونه با استفاده از این خاصیت یه حالت انیمیشن به عناصر بدھیم.) این خاصیت سه مقدار دارد، و ھر مقدار برای یکی از جلوه ھا به کار می رود.
قاعده کلی :
طراحی سایتطراحی سایت, طراحی وب سایت, طراحی وب , طراحی سایت حرفه ای ,طراحی سایت فروشگاهی , سئو با بهترین طراحی سایت اسپیناس
Transform: rotate(numberdeg)
Transform: skew(numberdeg)
Transform: scale(number)
مقدار پیشفرض : none
Rotate : برای چرخش اجزا به کار می رود.
Skew : برای کجی و انحراف عناصر به کار می رود
Scale : برای بزرگنمایی عناصر به کار می رود
در ادامه برای آشنایی با ھر یک از مقادیر یک مثال میزنیم :
مقدار rotate
مثال :
<img src="images/Espinas. png" width="400" height="153" />
کد css :
img {
-webkit-transform: rotate(50deg) ;
-moz-transform: rotate(50deg) ;
-o-transform: rotate(50deg) ;
transform: rotate(50deg) ;
}
دقت کنید که حتما از پیشوندھای مرورگرھا استفاده کنید تا در اجرای کد مشکلی پیش نیاید.
این مقدار از اعداد منفی نیز پشتیبانی می کند.
مقدار skew
مثال :
<img src="images/7learn. png" width="400" height="153" />
کد css :
img {
-webkit-transform: skew(50deg) ;
-moz-transform: skew(50deg) ;
-o-transform: skew(50deg) ;
transform: skew(50deg) ;
}
این مقدار از اعداد منفی نیز پشتیبانی می کند.
مقدار scale
طراحی وب سایتطراحی سایت, طراحی وب سایت, طراحی وب , طراحی سایت حرفه ای ,طراحی سایت فروشگاهی , سئو با بهترین طراحی سایت اسپیناس
مثال :
<img src="images/7learn. png" width="400" height="153" />
کد css :
img {
-webkit-transform: scale(1. 5) ;
-moz-transform: scale(1. 5) ;
-o-transform: scale(1. 5) ;
transform: scale(1. 5) ;
}
عدد ۵٫۱ به این معناس که عنصر عرض و ارتفاع عنصر ۵٫۱ برابر افزایش یابد. (بزرگنمایی) این مقدار از اعداد منفی نیز پشتیبانی می کند. با این تفاوت که عنصر ما ۳۶۰ درجه نیز تغییر زاویه خواھد داد.
بسیار خب،در جلسه دوم این فصل با خاصیت ھای transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواھیم شد
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
