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();">&times;</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>


Download Source & Demo