تبدیل 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 بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊