دسته : آموزش CSS

آموزش rotate و rotate3d در css

آموزش rotate و rotate3d در css همراه با مثال و توضیحات کامل. کدهای زیر را در یک فایل html قرار داده و اجرا کنید تا نتیجه را ببینید.

دستور rotate در css

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

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

در زیر یک مثال از این دستور را مشاهده می کنید. با هاور کردن روی تصویر چرخش یا rotate انجام می شود.

دستور rotate 2d با transform بکار می رود.

<!DOCTYPE html>
<html>
<head>
<style>
img{
transition: 2s;
}
img:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>rotate3D()</p>
<div>
<img src="topsite98.png">
</div>
</body>
</html>

آموزش CSS 3D Transforms

در این بخش آموزش CSS 3D Transforms را خواهیم داشت و با دستور rotate آشنا می شوید.

با چندین مثال حالت های مختلف دستور rotate3d را بررسی خواهیم کرد.

دستور rotateX در css

حال به سراغ دستور rotateX در css میرویم و با آن آشنا می شویم.

دستور rotateX برای چرخش از طریق عرض یا x بکار می رود.

در مثال زیر می توانید نحوه کار دستور rotateX را مشاهده نمایید.

با هاور کردن روی عکس چرخش در جهت x اتفاق می افتد.

کد زیر را می توانید در یک فایل با پسوند html قرار دهید و در کنار فایل یک تصویر با نام topsite98 و پسوند آن حتما png باشد .

می توانید یک تصویر با نام دلخواه نیز قرار دهید ولی در کد نیز آن را تغییر دهید.

<!DOCTYPE html>
<html>
<head>
<style>
img{
transition: 2s;
}
img:hover{
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>rotate3D()</p>
<div>
<img src="topsite98.png">
</div>
</body>
</html>

دستور rotateY در css

حال به سراغ دستور rotateY در css میرویم و روش استفاده و کاربرد آن را می آموزیم.

متد rotateY در css برای چرخش عنصر html در جهت y بکار می رود.

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

<!DOCTYPE html>
<html>
<head>
<style>
img{
transition: 2s;
}
img:hover{
transform: rotateY(45deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>rotate3D()</p>
<div>
<img src="topsite98.png">
</div>
</body>
</html>

دستور rotateZ در css

دستور rotateZ در css برای چرخاندن عنصر در جهت z بکار می رود.

در مثال زیر با روش کار دستور rotateZ آشنا می شوید.

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

<!DOCTYPE html>
<html>
<head>
<style>
img{
transition: 2s;
}
img:hover{
transform: rotateZ(45deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>rotate3D()</p>
<div>
<img src="topsite98.png">
</div>
</body>
</html>

دستور rotate3d در css

اکنون دستور rotate3d در css را بررسی می کنیم و با کاربرد آن آشنا می شویم.

ما می توانیم هر سه دستور rotateX و rotateY و rotateZ را با هم استفاده کنیم.

در مثال زیر مقادیر وارد شده شامل x,y,z میباشد و سس یک درجه را وارد می کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
img{
transition: 2s;
}
img:hover{
transform: rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>rotate3D()</p>
<div>
<img src="topsite98.png">
</div>
</body>
</html>

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

موفق باشید.

منبع : تاپ سایت 98 نویسنده : هدایت عباسی تاریخ : 2019-04-04 15:45:58 تگ :
تاپ سایت 98 تاپ سایت 98 تاپ سایت 98