تبدیل CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 26 بهمن 1399با استفاده از ویژگی تبدیل CSS ، می توانید شکل یک عنصر 2D یا 3D را اصلاح کنید (به عنوان مثال ، مقیاس CSS را ایجاد کنید یا آن را بچرخانید):
div {
-webkit-transform: rotate(10deg); /* Safari, Chrome, Opera */
-ms-transform: rotate(10deg); /* Internet Explorer 9 */
transform: rotate(10deg);
}
چندین عملکرد تبدیل وجود دارد که می توانید برای دستیابی به نتایج مختلف اعمال کنید. ما آن ها را در بخش زیر ارائه خواهیم داد.
بررسی وتغییر ویژگی تبدیل CSS
نحو خاصیت تبدیل CSS به شرح زیر است:
تبدیل: تابع (مقادیر)؛
برای آشنایی با توابع موجود به جدول زیر مراجعه کنید:
Description | Values | Function |
تعیین می کند که هیچ تبدیل CSS وجود ندارد | The default value | none |
تحول 2D را در یک ماتریس شش ارزشی تعریف می کند | n,n,n,n,n,n | ()matrix |
تغییر شکل 3D را در یک ماتریس 4×4 تعریف می کند | n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n | matrix3d |
ترجمه 2 بعدی را تعریف می کند | x,y | ()translate |
ترجمه سه بعدی را تعریف می کند | x,y,z | ()translate3d |
ترجمه افقی را تعریف می کند | x | ()translateX |
ترجمه عمودی را تعریف می کند | y | ()translateY |
ترجمه محور Z را تعریف می کند | z | ()translateZ |
مقیاس یک عنصر 2D | x,y | ()scale |
مقیاس یک عنصر 3D | x,y,z | ()scale3d |
یک عنصر را به صورت افقی مقیاس می کند | x | ()scaleX |
مقداری را به صورت عمودی مقیاس می دهد | y | ()scaleY |
مقداری را در امتداد محور z مقیاس می دهد | z | ()scaleZ |
یک عنصر 2D را با یک زاویه تعریف شده می چرخاند | angle | ()rotate |
یک عنصر 3D را با یک زاویه تعریف شده می چرخاند | x,y,z,angle | ()rotate3d |
یک عنصر را با یک زاویه تعریف شده بر روی محور x می چرخاند | angle | ()rotateX |
یک عنصر را با یک زاویه تعریف شده بر روی محور y می چرخاند | angle | ()rotateY |
یک عنصر را با یک زاویه تعریف شده بر روی محور z می چرخاند | angle | ()rotateZ |
یک عنصر 2D را منحرف می کند | x-angle,y-angle | ()skew |
یک عنصر را در محور x منحرف می کند | angle | ()skewX |
یک عنصر را بر روی محور y منحرف می کند | angle | ()skewY |
فاصله بین بیننده و z = 0 را مشخص می کند | n | ()perspective |
در این مثال ، ما عناصر را با استفاده از ویژگی transform CSS ایجاد و چرخانده ایم:
body {
margin: 35px;
background-color: #41a3f4;
}
div.polaroid {
width: 295px;
padding: 11px 11px 21px 15px;
border: 2px solid #BFBFBF;
background-color: red;
box-shadow: 11px 11px 6px #aaaaaa;
}
div.rotate_right {
float: left;
-webkit-transform: rotate(10deg); /* Safari */
-ms-transform: rotate(10deg); /* Internet Explorer 9 */
transform: rotate(10deg);
}
div.rotate_left {
float: right;
-webkit-transform: rotate(-10deg); /* Safari */
-ms-transform: rotate(-10deg); /* Internet Explorer 9 */
transform: rotate(-10deg);
}
توجه: می توانید اطلاعات بیشتر در مورد translate () ، translate3d () ، translateX () و translateY () را در این آموزش بخوانید.
پشتیبانی از مرورگر
این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.
در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟