Summarize this content to 400 words in Persian Lang یک افکت چرخش شناور روی تصاویر می تواند محتوای شما را جذاب تر و تعاملی تر کند. در این آموزش، نحوه ایجاد یک افکت چرخش شناور ساده و در عین حال چشم نواز را با استفاده از HTML و CSS به شما آموزش خواهیم داد.
نحوه ایجاد افکت
HTML:
ابتدا کد HTML زیر را اضافه کنید:
<figure class=”hover-rotate”>
<img src=”example.jpg” alt=”Sample Image”/>
</figure>
شما می توانید هر تصویری را که دوست دارید اضافه کنید.
این کد یک تصویر پیچیده شده در یک برچسب را با یک کلاس چرخش شناور تنظیم می کند.
CSS:
.hover-rotate {
overflow: hidden;
margin: 8px;
min-width: 240px;
max-width: 320px;
width: 100%;
}
.hover-rotate img {
transition: all 0.3s;
max-width: 100%;
}
.hover-rotate:hover img {
transform: scale(1.3) rotate(5deg);
}
چگونه کار می کند:
این <figure>تگ به عنوان یک محفظه برای تصویر عمل می کند و کلاس hover-rotate را اعمال می کند.
این .hover-rotate class ابعاد تصویر را تنظیم می کند و هر سرریزی را پنهان می کند. این .hover-rotate کلاس img اثر انتقال صاف را کنترل می کند.
هنگامی که ماوس را روی تصویر می‌برید، به لطف transformدارایی
اگر این آموزش برای شما مفید بود، آن را با دیگران به اشتراک بگذارید یا در زیر نظر خود را بنویسید. برای نکات و ترفندهای بیشتر در مورد طراحی وب، حتما پست های دیگر ما را بررسی کنید.
برای آموزش بیشتر از این قبیل به وب سایت من مراجعه کنید
یک افکت چرخش شناور روی تصاویر می تواند محتوای شما را جذاب تر و تعاملی تر کند. در این آموزش، نحوه ایجاد یک افکت چرخش شناور ساده و در عین حال چشم نواز را با استفاده از HTML و CSS به شما آموزش خواهیم داد.
نحوه ایجاد افکت
HTML:
ابتدا کد HTML زیر را اضافه کنید:
<figure class="hover-rotate">
<img src="example.jpg" alt="Sample Image"/>
</figure>
شما می توانید هر تصویری را که دوست دارید اضافه کنید.
این کد یک تصویر پیچیده شده در یک برچسب را با یک کلاس چرخش شناور تنظیم می کند.
CSS:
.hover-rotate {
overflow: hidden;
margin: 8px;
min-width: 240px;
max-width: 320px;
width: 100%;
}
.hover-rotate img {
transition: all 0.3s;
max-width: 100%;
}
.hover-rotate:hover img {
transform: scale(1.3) rotate(5deg);
}
چگونه کار می کند:
این <figure>تگ به عنوان یک محفظه برای تصویر عمل می کند و کلاس hover-rotate را اعمال می کند.
این .hover-rotate class ابعاد تصویر را تنظیم می کند و هر سرریزی را پنهان می کند. این .hover-rotate کلاس img اثر انتقال صاف را کنترل می کند.
هنگامی که ماوس را روی تصویر می‌برید، به لطف transformدارایی
اگر این آموزش برای شما مفید بود، آن را با دیگران به اشتراک بگذارید یا در زیر نظر خود را بنویسید. برای نکات و ترفندهای بیشتر در مورد طراحی وب، حتما پست های دیگر ما را بررسی کنید.
برای آموزش بیشتر از این قبیل به وب سایت من مراجعه کنید
