Skip to content

How to Create 3D Rotating Image Gallery Sider with Elementor.

3D rotating Image Gallery

Let’s create an amazing 3D rotating image gallery slider in WordPress with Elementor.

here we made a video on our YouTube channel that you can follow easily. the HTML and css code is below.


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
var $ = jQuery
$(document).ready(function(){
  var className = 'myGallery' //CLASSNAME
  
  $('.' + className).each(function(){
    var span = $(this).find('.elementor-widget-image'),
        len = span.length
    span.each(function(i){
        $(this).css('transform', 'rotateY(' + i*360/len + 'deg) translateZ(calc(' + ((len + 1) * 31 + len*1) + 'px))')
    })
    $(this).parent().addClass('myGalleryParent')
  })
})
</script>

CSS CODE:

Note: You can target any selected if you are using the elementor Free version. currently we are using Elementor Pro



selector .elementor-widget-wrap{
    width: 200px;
    height:200px;
    transform-style: preserve-3d;
}
selector .elementor-widget-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);
    margin: 0 !important;  
}
selector .elementor-widget-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*ANIMATION*/
selector .elementor-widget-wrap{
    /*Duration Control*/
    animation: animate 20s linear infinite;
}
@keyframes animate{
    0%
    {
        transform: perspective(1000px) rotateY(0deg);
    }
    100%
    {
        transform: perspective(1000px) rotateY(360deg);
    }
}
Scan the code