Get Ready Elementor Templates

3D Rotating Image Gallery Using Elementor | WordPress Image Gallery

Subscribe To My YouTube Channel For More Upcoming Videos

3D Image Slider JS


  

3D Image Slider CSS

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

3D Image Animation CSS

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

3D Image Slider CSS

/*MOBILE*/
@media (max-width:767px){
.myGalleryParent{
    /*Scale Control*/
    transform: scale(0.7);
}
}
Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans