style flip card background color transparent width 300px height 200px border 1px solid f1f1f1 perspective 1000px Remove this if you don t want the 3D effect This container is needed to position the front and back side flip card inner position relative width 100 height 100 text align center transition transform 0 8s transform style preserve 3d Do an horizontal flip when you move the mouse over the flip box container flip card hover flip card inner transform rotateY 180deg Position the front and back side flip card front flip card back position absolute width 100 height 100 webkit backface visibility hidden Safari backface visibility hidden Style the front side fallback if image is missing flip card front background color bbb color black Style the back side flip card back background color dodgerblue color white transform rotateY 180deg style script Working with webp file formats just like jpg gif png but newer document body style minHeight 1100px let container document createElement div document body appendChild container container style position relative const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas id canvas canvas width img width canvas height img height container appendChild canvas const ctx canvas getContext 2d canvas style position relative drawImage image sx sy sWidth sHeight dx dy dWidth dHeight ctx drawImage img 0 0 canvas style width 100 let count 0 for let x 0 x 10 x for let y 0 y 10 y getRect ctx 21 x 167 212 y 200 158 184 count canvas style display none false function getRect ctx x y w h count ctx strokeStyle red ctx lineWidth 2 ctx beginPath ctx moveTo x y ctx lineTo x w y ctx lineTo x w y h ctx lineTo x y h ctx lineTo x y ctx stroke let div document createElement div div className flip card div style position absolute div style left x px div style top y px div style width w px div style height h px div style border 7px solid yellow div style box sizing border box container appendChild div let divi document createElement div div appendChild divi divi className flip card inner let divf document createElement div divi appendChild divf divf className flip card front divf innerHTML let divb document createElement div divi appendChild divb divb className flip card back div class flip card div class flip card inner div class flip card front img src img_avatar png alt Avatar style width 300px height 300px div div class flip card back h1 John Doe h1 p Architect Engineer p p We love that guy p div div div if count 0 get image data let imgData ctx getImageData x y x w y h console log imgData imgData width imgData data length for let i 0 i imgData data length i 4 let c r imgData data i 0 g imgData data i 1 b imgData data i 2 a imgData data i 3 if c r 220 imgData data i 0 255 imgData data i 1 255 imgData data i 2 255 imgData data i 3 0 var canvas2 document createElement canvas divb appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h canvas2 style pointer events none ctx2 putImageData imgData 0 0 img src https notebook xbdev net var images chinesecharacters webp script style flip card background color transparent width 300px height 200px border 1px solid f1f1f1 perspective 1000px Remove this if you don t want the 3D effect This container is needed to position the front and back side flip card inner position relative width 100 height 100 text align center transition transform 0 8s transform style preserve 3d Do an horizontal flip when you move the mouse over the flip box container flip card hover flip card inner transform rotateY 180deg Position the front and back side flip card front flip card back position absolute width 100 height 100 webkit backface visibility hidden Safari backface visibility hidden Style the front side fallback if image is missing flip card front background color bbb color black Style the back side flip card back background color dodgerblue color white transform rotateY 180deg style script Working with webp file formats just like jpg gif png but newer document body style minHeight 1100px let container document createElement div document body appendChild container container style position relative const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas id canvas canvas width img width canvas height img height container appendChild canvas const ctx canvas getContext 2d canvas style position relative drawImage image sx sy sWidth sHeight dx dy dWidth dHeight ctx drawImage img 0 0 canvas style width 100 let count 0 for let x 0 x 10 x for let y 0 y 10 y getRect ctx 21 x 167 212 y 200 158 184 count canvas style display none false function getRect ctx x y w h count ctx strokeStyle red ctx lineWidth 2 ctx beginPath ctx moveTo x y ctx lineTo x w y ctx lineTo x w y h ctx lineTo x y h ctx lineTo x y ctx stroke let div document createElement div div className flip card div style position absolute div style left x px div style top y px div style width w px div style height h px div style border 7px solid yellow div style box sizing border box container appendChild div let divi document createElement div div appendChild divi divi className flip card inner let divf document createElement div divi appendChild divf divf className flip card front divf innerHTML let divb document createElement div divi appendChild divb divb className flip card back div class flip card div class flip card inner div class flip card front img src img_avatar png alt Avatar style width 300px height 300px div div class flip card back h1 John Doe h1 p Architect Engineer p p We love that guy p div div div get image data let imgData ctx getImageData x y x w y h console log imgData imgData width imgData data length for let i 0 i imgData data length i 4 let c r imgData data i 0 g imgData data i 1 b imgData data i 2 a imgData data i 3 if c r 220 imgData data i 0 255 imgData data i 1 255 imgData data i 2 255 imgData data i 3 0 var canvas2 document createElement canvas divf appendChild canvas2 divf style backgroundColor white div appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h 0 6 canvas2 style pointer events none ctx2 putImageData imgData 0 0 var canvas2 document createElement canvas divb appendChild canvas2 div appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h canvas2 style pointer events none ctx2 putImageData imgData 0 0 img src https notebook xbdev net var images chinesecharacters webp script
0 height 100 text align center transition transform 0 8s transform style preserve 3d Do an horizontal flip when you move the mouse over the flip box container flip card hover flip card inner transform rotateY 180deg Position the front and back side flip card front flip card back position absolute width 100 height 100 webkit backface visibility hidden Safari backface visibility hidden Style the front side fallback if image is missing flip card front background color bbb color black Style the back side flip card back background color dodgerblue color white transform rotateY 180deg style script Working with webp file formats just like jpg gif png but newer document body style minHeight 1100px let container document createElement div document body appendChild container container style position relative const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas id canvas canvas width img width canvas height img height container appendChild canvas const ctx canvas getContext 2d canvas style position relative drawImage image sx sy sWidth sHeight dx dy dWidth dHeight ctx drawImage img 0 0 canvas style width 100 let count 0 for let x 0 x 10 x for let y 0 y 10 y getRect ctx 21 x 167 212 y 200 158 184 count canvas style display none false function getRect ctx x y w h count ctx strokeStyle red ctx lineWidth 2 ctx beginPath ctx moveTo x y ctx lineTo x w y ctx lineTo x w y h ctx lineTo x y h ctx lineTo x y ctx stroke let div document createElement div div className flip card div style position absolute div style left x px div style top y px div style width w px div style height h px div style border 7px solid yellow div style box sizing border box container appendChild div let divi document createElement div div appendChild divi divi className flip card inner let divf document createElement div divi appendChild divf divf className flip card front divf innerHTML let divb document createElement div divi appendChild divb divb className flip card back div class flip card div class flip card inner div class flip card front img src img_avatar png alt Avatar style width 300px height 300px div div class flip card back h1 John Doe h1 p Architect Engineer p p We love that guy p div div div get image data let imgData ctx getImageData x y x w y h console log imgData imgData width imgData data length for let i 0 i imgData data length i 4 let c r imgData data i 0 g imgData data i 1 b imgData data i 2 a imgData data i 3 if c r 220 imgData data i 0 255 imgData data i 1 255 imgData data i 2 255 imgData data i 3 0 var canvas2 document createElement canvas divf appendChild canvas2 divf style backgroundColor white div appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h 0 6 canvas2 style pointer events none ctx2 putImageData imgData 0 0 var canvas2 document createElement canvas divb appendChild canvas2 div appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h canvas2 style pointer events none ctx2 putImageData imgData 0 0 img src https notebook xbdev net var images chinesecharacters webp script