این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کار با ویژگی Transforms در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Transforms در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ویژگی Transforms در CSS3
ویژگی تِرنسفرم یا Transform یکی دیگر از ویژگی های زبان CSS می باشد که در نسخه ۳ این زبان اضافه شده است و با استفاده از آن میتوان تگ ها را در یک صفحه وب تبدیل ( جابه جا کردن ، چرخوندن ، کج کردن ) کرد.
- حتما آموزش کامل ویژگی Transform در CSS رو مشاهده نمایید.
برخی از مقادیر ویژگی Transform :
- Translate ( X , Y )
- Scale ( X , Y )
- Rotate ( Angle )
- Skew ( X , Y )
- Matrix ( n,n,n,n,n,n )
Free-Learn
کار با مقدار translate
با استفاده از این مقدار میتونیم تگ هارو در محور X و Y جابه جا ( حرکت ) دهیم. ( X میشه بصورت افقی و Y بصورت عمودی )
- مقدار بصورت واحدهای اندازه گیری هستش مثه px یا % و..
شکل کلی :
|
1 |
transform: translate( X , Y ); |
|
1 2 3 |
.MyBox{ transform: translate( 200px , 10px ); } |
مثال شماره ۱ : قرار دادن یک تگ دقیقا در وسط صفحه ( هم بصورت افقی هم عمودی ) با استفاده از مقدار Translate
|
1 2 3 4 5 6 7 8 |
.MyBox{ transform: translate(-50%, -50%); position: absolute; right: 50%; left:50%; top:50%; bottom:50%; } |
Free-Learn
کار با مقدار Scale
با استفاده از این مقدار میشه تگ هارو بزرگ یا کوچک کرد ( افزایش یا کاهش مقیاس )
- مقدار بصورت عددی هستش مثلا ۱٫۵
شکل کلی :
|
1 |
transform: scale( X , Y ); |
|
1 2 3 |
.MyBox:hover{ transform: scale( 1.3 , 1.3 ); } |
Free-Learn
کار با مقدار Rotate
با استفاده از این مقدار میتونیم تگ هارو بچرخونیم ( چرخش در زوایه های مختلف )
- مقدار بصورت زاویه هستش مثلا ۱۲۰deg
شکل کلی :
|
1 |
transform: rotate( X_Y ); |
|
1 2 3 |
.MyBox:hover{ transform: rotate( 360deg ); } |
Free-Learn
کار با مقدار Skew
با استفاده از این مقدار میتونیم تگ هارو در محور X ها و Y ها کج کنیم
- مقدار بصورت زاویه هستش مثلا ۱۲۰deg
شکل کلی :
|
1 |
transform: skew( X , Y ); |
|
1 2 3 |
.MyBox:hover{ transform: skew( 30deg , 20deg ); } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : استفاده از چندین مقدار بصورت همزمان ( باید بین هر یک از مقادیر یک عدد فاصله قرار داد )
|
1 2 3 |
.MyImage:hover{ transform: rotate(360deg) scale(1.5); } |
