logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش rotate و rotate3d در css

آموزش rotate و rotate3d در css
هدایت عباسی آموزش CSS

آموزش ویدئویی دستور rotate و rotate3d

دانلود رایگان فیلم و آموزش ویدئویی 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 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

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

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.