{"id":44227,"date":"2019-07-24T14:21:18","date_gmt":"2019-07-24T08:21:18","guid":{"rendered":"https:\/\/www.elementpack.pro\/demo\/?page_id=44227"},"modified":"2026-03-15T12:06:02","modified_gmt":"2026-03-15T06:06:02","slug":"transform-example","status":"publish","type":"page","link":"https:\/\/www.elementpack.pro\/demo\/element\/transform-example\/","title":{"rendered":"Transform Example"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Demo 01 : <\/span>Transform Offset Effect<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tAdd smooth offset-based motion on hover to create depth, enhance focus, and deliver more engaging interactive visual feedback.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Offset Motion<\/div><\/div>

Transform Offset Hover Effect<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tAdd smooth offset-based motion on hover to create depth, enhance focus, and deliver more engaging interactive visual feedback.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n \n \n <\/path>\n <\/svg>\n <\/div>
\n \n \n <\/path>\n <\/svg>\n <\/div>
\n \n \n <\/path>\n <\/svg>\n <\/div>
\n \n \n <\/path>\n <\/svg>\n <\/div>
\n \n \n <\/path>\n <\/svg>\n <\/div>\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Demo 02 : <\/span>Transform Scale, Skew & Flip Effect<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tA modern hover effect where elements scale, skew, or flip smoothly, with subtle shadows and perspective for an engaging, responsive interaction.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Dynamic Transform<\/div><\/div>

Transform Scale, Skew & Flip Hover Interaction Effect<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\n\t\t\t\t\t\n\t\t\t\t\t\t<\/path><\/svg>\n\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\n\t\t\t\tHealthy Body, A Happy Life\t\t\t<\/span>\n\t\t<\/h3>\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Encourage a balanced lifestyle with interactive visuals that highlight the importance of health and wellness in daily life.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\n\t\t\t\t\t\n\t\t\t\t\t\t<\/path><\/path><\/g><\/svg>\n\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\n\t\t\t\tNatural Food, Healthy Life\t\t\t<\/span>\n\t\t<\/h3>\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Showcase nutritious and organic food options with stylish hover effects that make your content visually engaging and informative.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\n\t\t\t\t\t\n\t\t\t\t\t\t<\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/g><\/svg>\n\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\n\t\t\t\tRegular Health Checkup\t\t\t<\/span>\n\t\t<\/h3>\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Promote preventive healthcare practices with interactive cards that educate users about regular checkups for a healthier life.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Demo 03 : <\/span>Transform Offset Effect<\/span><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tAdd smooth offset-based motion on hover to create depth, enhance focus, and deliver more engaging interactive visual feedback.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Micheal\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tMicheal Moore<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tCustomer Representative<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Jordan\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tJordan Brown<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tTechnical Support<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Jack\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tJack Bateman<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tCustomer Services<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Earnie\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tEarnie Johnson<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tCustomer Support<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Lucky\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tLucky Garcia<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSuggest Manager<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Aaron\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tAaron Smith<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tCustomer Support<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Jason\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tJason Lee<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tBilling Support<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"Michael\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\t\t\t\tMichael Patel<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tBilling Support<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Demo 01 : Transform Offset Effect Add smooth offset-based motion on hover to create depth, enhance focus, and deliver more engaging interactive visual feedback. Offset Motion Transform Offset Hover Effect Add smooth offset-based motion on hover to create depth, enhance focus, and deliver more engaging interactive visual feedback. Demo 02 : Transform Scale, Skew & Flip Effect A modern hover effect where elements scale, skew, or flip smoothly, with subtle shadows and perspective for an engaging, responsive interaction. Dynamic Transform Transform Scale, Skew & Flip Hover Interaction Effect Healthy Body, A Happy Life Encourage a balanced lifestyle with interactive visuals that highlight the importance of health and wellness in daily life. Natural Food, Healthy Life Showcase nutritious and organic food options with stylish hover effects that make your content visually engaging and informative. Regular Health Checkup Promote preventive healthcare practices with interactive cards that educate users about regular checkups for a healthier life. Demo 03 : Transform Offset Effect Add smooth offset-based motion on hover to create depth, enhance focus, and deliver more engaging interactive visual feedback. Micheal Moore Customer Representative Jordan Brown Technical Support Jack Bateman Customer Services Earnie Johnson Customer Support Lucky Garcia Suggest Manager Aaron Smith Customer […]<\/p>\n","protected":false},"author":6974,"featured_media":0,"parent":32,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-44227","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages\/44227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/users\/6974"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/comments?post=44227"}],"version-history":[{"count":0,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages\/44227\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/pages\/32"}],"wp:attachment":[{"href":"https:\/\/www.elementpack.pro\/demo\/wp-json\/wp\/v2\/media?parent=44227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}