خاصیت تبدیل در CSS

این ویژگی خاصیت تبدیل در CSS را بصری کنترل می کند و به شما امکان می دهد عناصر را مقیاس بندی کنید ، بچرخانید ، منحرف کنید و ترجمه کنید.

استفاده از خاصیت تبدیل در CSS

با استفاده از ویژگی تبدیل CSS ، می توانید عناصر را تغییر دهید. با اکثر عناصر HTML کار می کند ، به جز عناصری که توسط مدل جعبه کنترل نمی شوند. علاوه بر این ، تبدیل نمی تواند با جعبه های درون خطی ، جدول ستون گروه و ستون جدول جایگزین نشده باشد.

ویژگی تبدیل فقط دو مقدار را می پذیرد: یکی از توابع تبدیل خاص یا هیچ (نشان می دهد که تبدیل اعمال نمی شود).

تبدیل: ترجمه کردن

ویژگی CSS transform: ترجمه () برای انتقال عناصر به سمت چپ یا راست یا بالا و پایین است. این دو مقدار را می پذیرد:

یک مقدار به این معنی است که این عنصر به سمت بالا و پایین یا در کنار هم قرار می گیرد. به یاد داشته باشید که مقادیر منفی عناصر را به سمت چپ ، مثبت را به سمت راست حرکت می دهند.

مقدار دوم عنصر را به سمت پایین هل می دهد. مقادیر منفی عناصر را به سمت بالا حرکت می دهند ، در حالی که موارد مثبت آن

ها را به سمت پایین حرکت می دهد.

مثال زیر یک عنصر HTML را با دو مقدار به سمت راست و پایین حرکت می دهد:

div {
  width: 80px;
  height: 80px;
  background-color: green;
}

.example1 {
  background-color: purple;
  color: white;
  border-radius: 5px;
  transform: translate(20px, 50px);
}

همچنین امکان حرکت عناصر در امتداد محور افقی یا عمودی وجود دارد. translateY عناصر را به صورت عمودی حرکت می دهد ، در حالی که translateY آنها را به صورت افقی تحت فشار قرار می دهد.

div {
  width: 80px;
  height: 80px;
  background-color: green;
}

.example1 {
  transform: translateY(130px); 
  background-color: purple;
}

با استفاده از تبدیل CSS: translate3d یا translateZ می توانید عناصر را در فضای سه بعدی نیز جابجا کنید. این توابع تاثیری ایجاد می کنند که عناصر از کاربر نزدیکتر یا دورتر می شوند.

div {
  width: 100px;
  height: 100px;
  background-color: green;
}

.example1 {
  transform: perspective(500px) translate3d(50px, 10px, 3px);
  background-color: pink;
}

تبدیل: مقیاس

ویژگی CSS transform: scale() برای مقیاس گذاری عناصر است.

اگر یک مقدار مشخص شود ، عنصر تعداد مشخص شده را چند برابر اندازه اصلی خود مقیاس می کند. وقتی دو مقدار تنظیم می کنید ، عنصر با توجه به مقدار اول به صورت افقی کشیده می شود و با مقدار دوم به صورت عمودی کشیده می شود.

مثال زیر اندازه یک عنصر را شش برابر اندازه طبیعی آن تغییر می دهد:

.example1 {
  background-color: purple;
  height: 100px;
  width: 100px;
  transform: scale(6);
}

توجه: استفاده از مقیاس بدون خاصیت تبدیل نیز امکان پذیر است. با این حال ، این آزمایشی است و بهترین پشتیبانی از مرورگر را ندارد.

به طور مشابه با ترجمه ، تبدیل CSS: مقیاس مختصر برای scaleX (برای تغییر اندازه افقی) و scaleY (برای تغییر اندازه عمودی) است.

مثال زیر از scaleY برای تغییر اندازه یک عنصر استفاده می کند:

.example1 {
  background-color: purple;
  height: 100px;
  width: 100px;
  transform: scaleY(3); 
}

همچنین می توانید از CSS transform: scale3d یا scaleZ برای تغییر اندازه عنصر در فضای سه بعدی استفاده کنید.

تبدیل: چرخش

تبدیل CSS: چرخش () برای ایجاد عناصر در اطراف یک نقطه ثابت است. به طور پیش فرض ، در اطراف مرکز عنصر می چرخد.

مثال زیر یک انیمیشن چرخشی ایجاد می کند:

div {
  display: inline-block;
  background-color: purple;
  height: 200px;
  width: 150px;
  padding: 1px;
  margin: 5px;
  border-radius: 100%;
  animation: roll 5s infinite;
  transform: rotate(30deg);
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

rotateX () برای چرخاندن عناصر در اطراف محور افقی است. عملکرد عنصر را تغییر شکل نمی دهد. این همانند rotate3d است (1،0،0 ، a).

rotateX () با مقادیر زاویه کار می کند. اگر مثبت باشند ، عنصر در جهت عقربه های ساعت حرکت می کند. مقادیر منفی باعث حرکت عنصر در جهت مخالف می شوند.

div {
  width: 100px;
  height: 100px;
  background-color: green;
}

.example1 {
  transform: rotateX(45deg);
  background-color: purple;
}

rotateY () برای چرخش یک عنصر در اطراف محور عمودی آن است. با مقادیر زاویه و حرکت مثبت در صورت مثبت بودن مقادیر زاویه ، همان rotateX عمل می کند.

div {
  width: 80px;
  height: 80px;
  background-color: green;
}

.example1 {
  transform: rotateX(45deg);
  background-color: purple;
}

تبدیل CSS: rotateZ () برای چرخش یک عنصر به دور محور Z است (فضای سه بعدی).

توجه: محور Z نمایانگر عمق است و عمود بر هر دو محور X و Y است.

عنصر در زاویه ای که در براکت تعیین کرده اید چرخانده می شود.

div {
    -webkit-transform: rotateZ(135deg); /* Safari */ 
    transform: rotateZ(135deg);
}

تغییر شکل: کج

تبدیل CSS: ویژگی skewX عناصر را به صورت افقی کج می کند. کجی عناصر را به صورت عمودی کج می کند.

توجه: خلاصه ای برای این دو عملکرد وجود ندارد. اگر نیاز به انحراف یک عنصر به صورت عمودی و افقی دارید ، باید از هر دو استفاده کنید.

مثال زیر از توابع CSS: توابع skewX و skewY برای نشان دادن تفاوت آن ها استفاده می کند:

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  margin-right: 15px;
  margin-left: 15px;
}

.example1 {
  transform: skewX(10deg);
  background-color: pink;
}

.example2 {
  transform: skewY(10deg);
  background-color:green;
}

مبدأ تبدیل

ویژگی CSS مبدل تبدیل به نقطه ای اشاره می کند که عنصر باید از آنجا تبدیل شود. به عنوان مثال ، منشا default پیش فرض تمام توابع تبدیل مرکز است.

CSS مبدل تبدیل با دو کلمه کلیدی نشان دهنده جهت کار می کند (به عنوان مثال ، چپ و راست). همچنین از مقادیر طول یا ترکیبی از کلمات کلیدی و طول استفاده می شود. سه مقدار نشان می دهد که این عنصر دارای اثر تبدیل CSS 3D خواهد بود.

مثال کد زیر مبدأ پیش فرض را تغییر داده و تحول را از نقطه دیگری شروع می کند:

div {
  display: inline-block;
  background-color: purple;
  height: 200px;
  width: 150px;
  padding: 1px;
  margin: 5px;
  border-radius: 100%;
  animation: roll 5s infinite;
  transform: rotate(30deg);
  transform-origin: 50px 50px;
}

تبدیل به سبک

ویژگی تبدیل در CSS به سبک تبدیل نشان می دهد که آیا فرزندان عناصر باید در فضای 3D باشند یا صاف باشند. به عبارت دیگر ، شما تعیین می کنید که آیا اثر تبدیل CSS 3D به کودکان منتقل می شود یا اینکه آنها به عنوان عناصر منظم HTML ظاهر می شوند.

مثال کد زیر نشان می دهد که چگونه مقدار حفظ -3 بعدی باعث می شود کودکان در فضای سه بعدی باقی بمانند ، در حالی که مقدار مسطح باعث می شود آنها مانند عناصر عادی به نظر برسند:

div {
  display: inline-block;
  background-color: purple;
  height: 200px;
  width: 150px;
  padding: 1px;
  margin: 5px;
  border-radius: 100%;
  animation: roll 5s infinite;
  transform: rotate(30deg);
  transform-origin: 50px 50px;
  transform-style: preserve-3d;
}

جعبه تبدیل

کادر تبدیل CSS کادر طرح بندی را نشان می دهد که مربوط به خصوصیات تبدیل و مبدأ تبدیل می شود. این می تواند مقادیر زیر را داشته باشد:

• view-box باعث می شود که نزدیک ترین نمای SVG به جعبه مرجع تبدیل شود.
• جعبه پر کردن باعث می شود که جعبه اتصال شی به جعبه مرجع تبدیل شود.
• box-box باعث می شود که جعبه حاشیه به جعبه مرجع تبدیل شود.

هشدار: این یک ویژگی آزمایشی است ، به این معنی که بهترین پشتیبانی از مرورگر را ندارد.

قابلیت مشاهده پس زمینه

قابلیت رویت backface به اثر تبدیل CSS 3D مربوط می شود. این نشان می دهد که آیا صورت پشتی یک عنصر باید قابل مشاهده باشد یا پنهان. با این حال ، این یک ویژگی آزمایشی است ، به این معنی که برخی از مرورگرها در ارائه صحیح آن مشکل دارند.

این مثال کد نحو قابلیت backface-visibility را نشان می دهد:

.example1 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
    
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.example2 {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

توجه: قابلیت رویت backface باید همیشه به صورت -webkit-backface-visibility نوشته شود.

چشم انداز خاصیت تبدیل در CSS

خاصیت تبدیل در CSS با نشان دادن فاصله بین صفحه Z و کاربران ، فضای سه بعدی را تنظیم می کند. مقادیر کوچکتر از زمانی که از صفحه Z نزدیکتر می شوید تأثیر قابل توجه تری ایجاد می کنند. با مقادیر بزرگتر بروید تا جلوه ملایم تری ایجاد کنید.

هنگامی که از پرسپکتیو همراه با تبدیل CSS استفاده می کنید ، این ویژگی فضای سه بعدی را تنظیم می کند ، در حالی که ویژگی چشم انداز به تنهایی باعث می شود والدین فضای سه بعدی را با فرزندان خود به اشتراک بگذارند.

مثال زیر ویژگی چشم انداز را در عمل نشان می دهد:

.parent.perspective {
  perspective: 70em;
}
.parent.perspective .child {
  transform: rotateX(70deg);
  background: rebeccapurple;
}

چشم انداز-مبدا

CSS دیدگاه-مبدا برای تعیین موقعیتی است که کاربر در آن می بیند. اگر چشم انداز هم تعیین نکنید ، خاصیت تاثیری ندارد. علاوه بر این ، باید به عنصر والد اختصاص یابد.

مثال کد زیر نحوه کارکرد چشم انداز را نشان می دهد:

.example1 { perspective-origin: 15% 65%; }

.example2 { perspective-origin: 15px 35px; }

.example3 { perspective-origin: left bottom; }

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.