How To Make A Auto Rotating 3D Carousel

Elementor 3.17 Update Broke My Forms — Here’s the Fix

Everything looks fine for about twelve seconds. Then the contact forms stop submitting. No error message. No console warning. Just… ...

Read More

My WordPress Site Got Hacked (Not My Fault — wp2shell Did It)

Someone just exploited a hole in WordPress core that lets them take over your server without logging in. Here's what ...

Read More

Elementor Update Just Broke My Site — Here’s How I Sorted It

Updated Elementor and your site broke? I walk through the actual fixes that worked when it happened to a client ...

Read More

How To Make A Vertical 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Read More
Showing Slide 1 of 5

So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!

The Following are the css class names I used in the tutorial:

				
					Reboot-Auto-Gallery-Parent 

Reboot-Auto-Gallery


				
			

The Following code goes into the Gallery Container css:

				
					.Reboot-Auto-Gallery-Parent  {
    position: relative; /* Ensures proper positioning context */
    display: flex;
}
				
			

The Following code goes into the Gallery Container css:

				
					.Reboot-Auto-Gallery{
   transform-style: preserve-3d;
   
}
selector .elementor-widget-image{
 position: absolute;
   transform-origin: center;
   transform-style: preserve-3d;
   -webkit-box-reflect: below 0px linear-gradient(to bottom ,transparent 65%, rgba(0, 0, 0, 0.4));

}
selector .Reboot-Auto-Gallery img{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/*ANIMATION*/
.Reboot-Auto-Gallery{
    /*Duration Control*/
    animation: AutoGalleryReboot 20s linear infinite;
}
@keyframes AutoGalleryReboot{
    0%
    {
        transform: perspective(1000px) rotateY(0deg);
    }
    100%
    {
        transform: perspective(1000px) rotateY(360deg);
    }
}


/*MOBILE*/
@media (max-width:767px){
.Reboot-Auto-Gallery-Parent {
    /*Scale Control*/
    transform: scale(0.65)!important;
}
}


				
			

The Following code goes into the HTML widget css:

				
					<script>
var rebootJ = jQuery
rebootJ(document).ready(function(){
 var AutoGal = 'Reboot-Auto-Gallery' 
 rebootJ('.' + AutoGal).each(function(){
   var rebootautogalcells = rebootJ(this).find('.elementor-widget-image'),
       rebootautocellsCount = rebootautogalcells.length
   rebootautogalcells.each(function(rebootCurrentCellAuto){
       rebootJ(this).css('transform', 'rotateY(' + rebootCurrentCellAuto*360/rebootautocellsCount + 'deg) translateZ(calc(' + ((rebootautocellsCount +1) * 31 + rebootautocellsCount*1) + 'px))')
   })
 })
})
</script>