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

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);
    }
}