Cube ads with rotating animation using css
Using shapes like cube, squares, circles is nothing new, we have seen these trends in web design for a very long time. In this post about Cube ads that you can copy paste to make use of cube shapes in your web pages.
Cube Ads
The Cube Ads is a visually compelling Ad of 200 pixels wide by 200 pixels high (200×200) that turns automatically or with user interaction. Dragging side to side rotates the cube in the desired direction while creating a 3D effect and revealing additional content. This Ad format allows you to showcase multiple messages or offers within an interactive experience.
HTML structure
<div id="banner-cube-pe"><div id="cube-close-pe" onclick="document.getElementById('banner-cube-pe').remove();">×</div><div id="banner-cube-stage"><div id="banner-cube-shape"><!-- Cube 1 --><div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) rotateY(-90deg) translateZ(100px) !important;"><!-- Init Ads Cube 200 x 200 --><img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgst5LQgT7SZf0W-GGBDXiUuORZKkoG90wHx2GVkEDoOIqI-97r8QWC-CkMHOimS5GL625TMRogz_Z_FIuiQv7mV0Y6XIYX1e1QzFdbNrf-4f1M1Ay63BEdbRH-T7YqDHnoblJtCd84/s1600/pexels-photo-326424.jpeg' width='200' height='200' style='width:200px;height:200px'/><!-- End Ads Cube 200 x 200 --></div><!-- Cube 2 --><div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) translateZ(100px) !important;"><!-- Init Ads Cube 200 x 200 --><img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgst5LQgT7SZf0W-GGBDXiUuORZKkoG90wHx2GVkEDoOIqI-97r8QWC-CkMHOimS5GL625TMRogz_Z_FIuiQv7mV0Y6XIYX1e1QzFdbNrf-4f1M1Ay63BEdbRH-T7YqDHnoblJtCd84/s1600/pexels-photo-326424.jpeg' width='200' height='200' style='width:200px;height:200px'/><!-- End Ads Cube 200 x 200 --></div><!-- Cube 3 --><div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) rotateY(90deg) translateZ(100px) !important;"><!-- Init Ads Cube 200 x 200 --><img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgst5LQgT7SZf0W-GGBDXiUuORZKkoG90wHx2GVkEDoOIqI-97r8QWC-CkMHOimS5GL625TMRogz_Z_FIuiQv7mV0Y6XIYX1e1QzFdbNrf-4f1M1Ay63BEdbRH-T7YqDHnoblJtCd84/s1600/pexels-photo-326424.jpeg' width='200' height='200' style='width:200px;height:200px'/><!-- End Ads Cube 200 x 200 --></div><!-- Cube 4 --><div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) rotateY(180deg) translateZ(100px) !important;"><!-- Init Ads Cube 200 x 200 --><img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgst5LQgT7SZf0W-GGBDXiUuORZKkoG90wHx2GVkEDoOIqI-97r8QWC-CkMHOimS5GL625TMRogz_Z_FIuiQv7mV0Y6XIYX1e1QzFdbNrf-4f1M1Ay63BEdbRH-T7YqDHnoblJtCd84/s1600/pexels-photo-326424.jpeg' width='200' height='200' style='width:200px;height:200px'/><!-- End Ads Cube 200 x 200 --></div></div></div></div>