Video Tutorial
Javascript Snippet for 3D Image Gallery
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
var className = '3dGallery'
$('.' + 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('3dGalleryParent')
})
})
</script>
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var $ = jQuery $(document).ready(function(){ var className = '3dGallery' $('.' + 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('3dGalleryParent') }) }) </script>
CSS Snippet for 3D Image Gallery
- selector .elementor-widget-wrap{
width: 200px;
height:300px;
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;
}
selector .elementor-widget-wrap{
animation: animate 20s linear infinite;
}
@keyframes animate{
0%
{
transform: perspective(1000px) rotateY(0deg);
}
100%
{
transform: perspective(1000px) rotateY(360deg);
}
}
@media (max-width:767px){
.3dGalleryParent{
transform: scale(0.7);
}
}
- selector .elementor-widget-wrap{ width: 200px; height:300px; 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; } selector .elementor-widget-wrap{ animation: animate 20s linear infinite; } @keyframes animate{ 0% { transform: perspective(1000px) rotateY(0deg); } 100% { transform: perspective(1000px) rotateY(360deg); } } @media (max-width:767px){ .3dGalleryParent{ transform: scale(0.7); } }
Comments
Post a Comment