آموزش دستور CSS Transform

هدایت عباسی آموزش CSS

آموزش دستور CSS Transform شامل دستورات translate ، scale ، rotate، skew، matrix همراه با مثال و توضیحات کامل. کدها را در یک فایل html قرار داده و تست نمایید تا نتیجه را ببینید.

آموزش دستور translate در css

در این بخش از آموزش css از تاپ سایت 98 به سراغ آموزش دستور translate در css میرویم.

با استفاده از دستور translate می توانیم مکان عنصرهای html را تغییر دهیم.

دستور translate زیرمجموعه دستور Transform میباشد.

مثال دستور translate در css

حال مثال دستور translate در css را بررسی می کنیم.

در مثال زیر با استفاده از دستور translate عنصر div را جابجا کرده ایم.

کد html,css زیر را در یک فایل html قرار دهید و اجرا کنید.

در خروجی می بینید که مکان div به اندازه 30 پیکسل از عرض و 50 پیکسل از ارتفاع تغییر کرده است.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 260px;
height: 110px;
background-color: lightgray;
border: 1px solid black;
-ms-transform: translate(30px,50px);
-webkit-transform: translate(30px,50px);
transform: translate(30px,50px);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>The translate() method</p>
<div>
topsite98 - transform-translate
</div>
</body>
</html>

متد rotate در css

حال دستور rotate یا متد rotate در css (The rotate() Method) را بررسی می کنیم.

یکی دیگر از خاصیت ها یا ویژگی های دستور transform ویژگی یا متد rotate میباشد.

همان طور که از اسم آن پیداست از این دستور برای چرخاندن عناصر html استفاده می کنند.

مثال متد rotate در css

در مثال متد rotate در css که در زیر مشاهده می کنید با هاور کردن یا قرار دادن موس روی باکس یا div آن عنصر می چرخد.

دستور rotate می تواند مقدار مثبت یا مقدار منفی بگیرد.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 260px;
height: 110px;
background-color: lightgray;
border: 1px solid black;
}
div:hover{
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>The translate() method</p>
<div>
topsite98 - transform-translate
</div>
</body>
</html>

آموزش دستور scale در css

متد scale یا The scale() Method از زیرمجموعه transform میباشد به اندازه پارامترهایی که می گیرد می تواند عرض و ارتفاع عنصر را کمتر یا بیشتر کند.

مقدار ورودی می تواند بزرگتر یا کوچکتر از یک باشد.

مثال دستور scale در css

در مثال دستور scale در css که در زیر مشاهده می کنید هنگامی که هاور می کنیم و با موس روی عنصر حرکت می کنیم عرض و ارتفاع عنصر بیشتر می شود.

اگر بدرستی از این متد یا خاصیت استفاده شود می تواند سایت یا صفحه وب را زیبا کند.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 260px;
height: 110px;
background-color: lightgray;
border: 1px solid black;
}
div:hover{
-ms-transform: scale(1.2,1.2); /* IE 9 */
-webkit-transform: scale(1.2,1.2); /* Safari */
transform: scale(1.2,1.2); /* Standard syntax */
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>The translate() method</p>
<div>
topsite98 - transform-translate
</div>
</body>
</html>

متد skew در css

متد skew در css یا The skew () Method به اندازه زوایه ای که به آن داده می شود می تواند عنصر را کج کند.

خاصیت یا دستور skew دو مقدار را می گیرد که عنصر را در جهت عرض و ارتفاع تغییر می دهد.

مثال متد skew در css

مثال متد skew در css را مشاهده می کنید.

خروجی این مثال ، تغییر و کج شدن عنصر div با هاور کردن است.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 260px;
height: 110px;
background-color: lightgray;
border: 1px solid black;
}
div:hover{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>The translate() method</p>
<div>
topsite98 - transform-translate
</div>
</body>
</html>

متد skewX

متد skewX می تواند عنصر را در یک جهت و عرض تغییر دهد.

نحوه استفاده از آن را در قسمت زیر می بینید.

transform: skewX(20deg);

متد skewY

متد skewY می تواند عنصر را در یک جهت و ارتفاع تغییر دهد.

نحوه استفاده از آن را در قسمت زیر می بینید.

transform: skewY(20deg);

متد matrix در css

متد matrix شامل ترکیبی از همه 2D transform methods میباشد.

پارامترهای دستور matrix در زیر آورده شده است.

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

مثال متد matrix

مثال متد matrix را در زیر مشاهده می کنید.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 260px;
height: 110px;
background-color: lightgray;
border: 1px solid black;
}
div:hover{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>The translate() method</p>
<div>
topsite98 - transform-translate
</div>
</body>
</html>

کدها همه تست شده میباشد.

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید