- Jun 6, 2020
- 11,593
- 4,508
[H1]جلوه شناور Photo Flip با استفاده از CSS و HTML[/H1]
با استفاده از CSS و HTML ساده در هر وبسایتی، میتوان افکت شناور تصویر برگردان را به راحتی انجام داد. این افکت شناور در قسمت گالری که میخواهیم اطلاعات تصویر یا تصویر دیگری را در پشت آن فاش کنیم، بسیار مؤثر خواهد بود.
ویژگی " transform:rotateY(180deg) " مسئول جلوه چرخشی است که عکس را حدود 180 درجه در محور Y می چرخاند. ویژگی " backface-visibility:hidden " تصویر را هنگامی که رو به صفحه نمایش نیست پنهان می کند، بنابراین تصویر جایگزین هنگام ورق زدن ظاهر می شود.
بخش HTML کد بسیار ساده است تنها کاری که باید انجام دهید این است که تصاویر را در کانتینرهای <div> با کلاس های مشخص قرار دهید. همچنین میتوانید تصاویر را با متنی در داخل « flip_back » جایگزین کنید تا توضیحات مربوط به تصویر را هنگام ورق زدن نمایش دهید.
برای دیدن لینک ها باید ثبت نام کنید
با استفاده از CSS و HTML ساده در هر وبسایتی، میتوان افکت شناور تصویر برگردان را به راحتی انجام داد. این افکت شناور در قسمت گالری که میخواهیم اطلاعات تصویر یا تصویر دیگری را در پشت آن فاش کنیم، بسیار مؤثر خواهد بود.
محتوای این بلوک پنهان فقط برای کاربر فعال, کاربر ویژه, کاربر ویژه برنزی الکترونیک, کاربر ویژه طلایی الکترونیک, کاربر ویژه نقره ای الکترونیک, کاربر ویژه پلاس الکترونیک قابل مشاهده است.
محتوای این بلوک پنهان فقط برای کاربر فعال, کاربر ویژه, کاربر ویژه برنزی الکترونیک, کاربر ویژه طلایی الکترونیک, کاربر ویژه نقره ای الکترونیک, کاربر ویژه پلاس الکترونیک قابل مشاهده است.
بخش HTML کد بسیار ساده است تنها کاری که باید انجام دهید این است که تصاویر را در کانتینرهای <div> با کلاس های مشخص قرار دهید. همچنین میتوانید تصاویر را با متنی در داخل « flip_back » جایگزین کنید تا توضیحات مربوط به تصویر را هنگام ورق زدن نمایش دهید.