ویژگی translate در CSS به شما امکان می‌دهد یک عنصر را در امتداد محورهای X (افقی)، Y (عمودی) و Z (عمق) حرکت دهید.
این ویژگی به تابع translate() از ویژگی transform شبیه است. تنها تفاوت بین این دو این است که تابع دوم از محور Z پشتیبانی نمی‌کند.
مقادیر ممکن:
- مقدار <length-percentage> تکی:
مقدار <length> یا <percentage> که ترجمه‌ای در امتداد محور X مشخص می‌کند.
همانند تابع translate() با مقدار تکی مشخص شده.
- دو مقدار <length-percentage>:
دو مقدار <length> یا <percentage> که ترجمه را در امتداد محورهای X و Y مشخص می‌کند.
همانند تابع translate() با دو مقدار مشخص شده.
- سه مقدار:
دو مقدار <length-percentage> و یک مقدار <length> که ترجمه را در امتداد محورهای X، Y و Z مشخص می‌کند.
همانند تابع translate3d() با سه مقدار مشخص شده.
- none: هیچ ترجمه‌ای اعمال نشود.
اعمال به همه عناصر قابل تغییر شکل.
سینتکس DOM:
object.style.translate = "none | "; No translation set
این بخش از CSS نشان می‌دهد که با استفاده از ویژگی translate می‌توانید یک المان را بدون ترجمه انتقال دهید. در این مثال زیر، مقدار translate به none تنظیم شده است، که منجر به عدم انجام هیچ ترجمه‌ای می‌شود. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود تا وقتی کاربر ماوس را روی المان می‌برد، تاثیر داشته باشد.
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 5px;
border: 1px solid black;
}
#m:hover {
background-color: orange;
translate: none;
}
</style>
</head>
<body>
<div id="m" class="box"></div>
</body>
</html>در این مثال، یک مربع با کلاس box تعریف شده است که هنگام نگه داشتن ماوس روی آن (hover)، رنگ پس‌زمینه آن به نارنجی تغییر می‌یابد و هیچ ترجمه‌ای اعمال نمی‌شود.
Using length-percentage for translate on X-axis
در این بخش، از ویژگی translate با استفاده از مقدار <length> یا <percentage> برای محور X تنظیم شده است که عناصر را در امتداد محور X حرکت می‌دهد. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود تا وقتی کاربر ماوس را روی المان می‌برد، تاثیر داشته باشد.
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 20px 0;
}
#o:hover {
background-color: palevioletred;
translate: 50% 0;
}
#p:hover {
background-color: royalblue;
translate: 2rem 0;
}
#m:hover {
background-color: orange;
translate: -30% 0;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگام نگه داشتن ماوس روی آن‌ها (hover)، رنگ پس‌زمینه آن‌ها تغییر می‌یابد و هر کدام با مقادیر متفاوتی از translate برای محور X حرکت می‌کنند:
- مربع با id=”n” با استفاده از translate: 20px 0 به اندازه 20 پیکسل به سمت راست حرکت می‌کند.
- مربع با id=”o” با استفاده از translate: 50% 0 به اندازه 50 درصد از عرض محدوده خود به سمت راست حرکت می‌کند.
- مربع با id=”p” با استفاده از translate: 2rem 0 به اندازه 2 رم به سمت راست حرکت می‌کند.
- مربع با id=”m” با استفاده از translate: -30% 0 به اندازه 30 درصد از عرض محدوده خود به سمت چپ حرکت می‌کند.
Using length-percentage for translate on Y-axis
این بخش از CSS نشان می‌دهد که چگونه می‌توانید مقدار translate را برای محور Y تنظیم کنید، که عنصر را در این محور منتقل می‌کند. در این مثال، مقدار translate: <length> | <percentage> برای محور Y تنظیم شده است، که عنصر را در این محور منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود.
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 0 10px;
}
#o:hover {
background-color: palevioletred;
translate: 0 50%;
}
#p:hover {
background-color: royalblue;
translate: 0 -30px;
}
#m:hover {
background-color: orange;
translate: 0 -30%;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگامی که ماوس را روی آن‌ها نگه داشته می‌کنید، رنگ پس‌زمینه آن‌ها تغییر می‌کند و هر کدام با یک مقدار مختلف translate به اندازه‌های مختلف در محور Y منتقل می‌شوند.
Using length-percentage for translate on Z-axis
در این بخش از CSS، مقدار translate: <length> | <percentage> برای محور Z تنظیم شده است که عنصر را در این محور منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود. در زیر مثالی از این استفاده نمایش داده شده است:
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 0 0 10px;
}
#o:hover {
background-color: palevioletred;
translate: 0 0 50%;
}
#p:hover {
background-color: royalblue;
translate: 0 0 -30px;
}
#m:hover {
background-color: orange;
translate: 0 0 -30%;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگامی که ماوس را روی آن‌ها نگه داشته می‌کنید، رنگ پس‌زمینه آن‌ها تغییر می‌کند و هر کدام با یک مقدار مختلف translate به اندازه‌های مختلف در محور Z منتقل می‌شوند.
Using length-percentage for translate on X and Y axes
در این بخش از CSS، مقدار translate: <length> | <percentage> برای محورهای X و Y تنظیم شده است، که عنصر را در این محورها منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود. در زیر مثالی از این استفاده نمایش داده شده است:
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 10px 30px;
}
#o:hover {
background-color: palevioletred;
translate: 50% -40%;
}
#p:hover {
background-color: royalblue;
translate: -30px -20px;
}
#m:hover {
background-color: orange;
translate: -30% 15px;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگامی که ماوس را روی آن‌ها نگه داشته می‌کنید، رنگ پس‌زمینه آن‌ها تغییر می‌کند و هر کدام با یک مقدار مختلف translate در محورهای X و Y منتقل می‌شوند.
Using length-percentage for translate on Y and Z axes
در این بخش از CSS، مقدار translate: <length> | <percentage> برای محورهای Y و Z تنظیم شده است، که عنصر را در این محورها منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود. در زیر مثالی از این استفاده نمایش داده شده است:
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 0 10px 30px;
}
#o:hover {
background-color: palevioletred;
translate: 0 10% 20%;
}
#p:hover {
background-color: royalblue;
translate: 0 -30px -20px;
}
#m:hover {
background-color: orange;
translate: 0 -30% 15px;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگامی که ماوس را روی آن‌ها نگه داشته می‌کنید، رنگ پس‌زمینه آن‌ها تغییر می‌کند و هر کدام با یک مقدار مختلف translate در محورهای Y و Z منتقل می‌شوند.
Using length-percentage for translate on X and Z axes
در این بخش از CSS، مقدار translate: <length> | <percentage> برای محورهای X و Z تنظیم شده است، که عنصر را در این محورها منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود. در زیر مثالی از این استفاده نمایش داده شده است:در این بخش از CSS، مقدار translate: <length> | <percentage> برای محورهای X و Z تنظیم شده است، که عنصر را در این محورها منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود. در زیر مثالی از این استفاده نمایش داده شده است:
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 10px 0 30px;
}
#o:hover {
background-color: palevioletred;
translate: 10% 0 20%;
}
#p:hover {
background-color: royalblue;
translate: -30px 0 -20px;
}
#m:hover {
background-color: orange;
translate: -30% 0 15px;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگامی که ماوس را روی آن‌ها نگه داشته می‌کنید، رنگ پس‌زمینه آن‌ها تغییر می‌کند و هر کدام با یک مقدار مختلف translate در محورهای X و Z منتقل می‌شوند.
Using length-percentage for translate on X, Y and Z axes
در این بخش از CSS، مقدار translate: <length> | <percentage> برای محورهای X، Y و Z تنظیم شده است، که عنصر را در تمام این سه محور منتقل می‌کند. این ویژگی همراه با پسو-کلاس :hover استفاده می‌شود. در زیر مثالی از این استفاده نمایش داده شده است:
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 15px;
border: 1px solid black;
}
#n:hover {
background-color: lavender;
translate: 10px 20px 30px;
}
#o:hover {
background-color: palevioletred;
translate: 10% 30% 20%;
}
#p:hover {
background-color: royalblue;
translate: -30px 10px -20px;
}
#m:hover {
background-color: orange;
translate: -30% 10px 30px;
}
</style>
</head>
<body>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
<div id="p" class="box"></div>
<div id="m" class="box"></div>
</body>
</html>در این مثال، چهار مربع با کلاس box تعریف شده‌اند که هنگامی که ماوس را روی آن‌ها نگه داشته می‌کنید، رنگ پس‌زمینه آن‌ها تغییر می‌کند و هر کدام با مقدار مختلف translate در محورهای X، Y و Z منتقل می‌شوند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام