آموزش rotate و rotate3d در css
آموزش ویدئویی دستور rotate و rotate3d
دانلود رایگان فیلم و آموزش ویدئویی rotate و rotate3d در css همراه با چندین مثال
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالاآموزش rotate و rotate3d در css همراه با مثال و توضیحات کامل. کدهای زیر را در یک فایل html قرار داده و اجرا کنید تا نتیجه را ببینید.
دستور rotate در css
در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور rotate در css میرویم.
از دستور rotate در css برای چرخش عنصر استفاده می کنیم.
در زیر یک مثال از این دستور را مشاهده می کنید. با هاور کردن روی تصویر چرخش یا rotate انجام می شود.
دستور rotate 2d با transform بکار می رود.
<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 باشد .
می توانید یک تصویر با نام دلخواه نیز قرار دهید ولی در کد نیز آن را تغییر دهید.
<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 بکار می رود.
در مثال زیر با روش کار این دستور یا متد آشنا می شوید.
<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 زیر را در یک فایل قرار داده و تست نمایید.
<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 میباشد و سس یک درجه را وارد می کنیم.
<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
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید