ساخت اسلایدر3 بعدی تصاویر
1397/05/29 08:44 , بهزاد ناظمی

ساخت اسلایدر3 بعدی تصاویر

ساخت اسلایدر تصاویر 3 بعدی

در این مقاله ما یک اسلایدر 3 بعدی ایجاد می کنیم. ما از خواص پرسپکتیو، تبدیل و انتقال CSS3  برای ایجاد اسلایدر تصویر 3بعدی استفاده خواهیم کرد. ما همچنین با استفاده از div و CSS3 یک دایره تو در تو را خواهیم ساخت.

تصویر زیر نتیجه کار است. هنگامی که روی حلقه ها کلیک میکنیم می توانیم اثر اسلایدر 3 بعدی را ببینیم، یا می توانیم از SetInterval () در جاوا اسکریپت برای دیدن اسلایدر تصویر بصورت خودکار استفاده کنیم.

حال کد را مورد بحث قرار خواهیم داد.

 

ما از 4 تصویر در فضای 3بعدی استفاده می کنیم که روی دایره ای است که کلیک می شود. به نظر می رسد یک مکعب چرخشی است.

خصوصیات زیر مسئول اسلایدر تصویر 3بعدی هستند.

ما می توانیم به اثر افقی بر روی دو عنصر اشاره کنیم.

  1. perspective: چشم انداز فضای 3بعدی برای عناصر کودکان را فراهم می کند. این فاصله بین Z plane و کاربر است.
  2. perspective-origin: این نقطه ناپدید شدن برای فضای 3بعدی ارائه شده توسط چشم انداز است.

توجه: هر دو ویژگی پیشین به عنصر parent اعمال می شود.

  1. transform-style: این برای قرار دادن عناصر کودک در فضای 3بعدی استفاده می شود که می تواند دو مقدار زیر را داشته باشد.

 

preserve-3d : عناصر را در فضای 3بعدی قرار می دهد.

Flat: این همانند یک عنصر HTML پیش فرض است.

  1. :transform-origin: این اجازه می دهد تا نقطه مبدأ یک انتقال را تغییر دهد.
  2. transform: تغییر شکل، اندازه و موقعیت بدون ایجاد اختلال در جریان نوشته ها. تغییرات CSS در جبر خطی و هندسه ریشه دارند.

در حال حاضر ما درباره حلقه هایی که با دو div تو در تو با استفاده از CSS3 ایجاد می شود صحبت می کنیم.

 

  1. border-radius: 50٪: مسئول ایجاد یک دایره شکل div است.
  2. top: 24٪ و سمت چپ: 24٪: این مسئولیت قرار دادن یک کودک دیو دقیقا در مرکز است.

در جاوا اسکریپت ما تنها تغییر ویژگی CSS را تغییر می دهیم: rotateY () ؛.

 

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  
<style>  
#controls, figcaption, div {  
text-align:center;  
}  
#controls div{  
padding-right:.25em;  
cursor:pointer;  
}  
#cubeRound {  
-webkit-perspective: 800;  
-moz-perspective: 800px;  
-ms-perspective: 800;  
perspective: 800;  
-webkit-perspective-origin: 50% 100px;  
-moz-perspective-origin: 50% 100px;  
-ms-perspective-origin: 50% 100px;  
perspective-origin: 50% 100px;  
-webkit-transform-style: preserve-3d;  
-moz-transform-style: preserve-3d;  
-ms-transform-style: preserve-3d;  
transform-style: preserve-3d;  
margin:50px auto 20px auto;  
width:450px;  
height:380px;  
}  
#cubeRound #cubeRotation {  
position: relative;  
margin: 0 auto;  
height: 231px;  
width: 450px;  
-webkit-transform-style: preserve-3d;  
-moz-transform-style: preserve-3d;  
-ms-transform-style: preserve-3d;  
transform-style: preserve-3d;  
-webkit-transform-origin: 50% 50px 0;  
-moz-transform-origin: 50% 50px 0;  
-ms-transform-origin: 50% 50px 0;  
transform-origin: 50% 50px 0;  
-webkit-transition:all 1.0s ease-in-out;  
-moz-transition:all 1.0s ease-in-out;  
-ms-transition:all 1.0s ease-in-out;  
transition:all 1.0s ease-in-out;  
}  
#cubeRound .face {  
position: absolute;  
height: 251px;  
width: 450px;  
padding: 0px;  
}  
img{  
height: 251px;  
width: 450px;  
}  
#cubeRotation .first {  
-webkit-transform: translateZ(225px);  
-moz-transform: translateZ(225px);  
-ms-transform: translateZ(225px);  
transform: translateZ(225px);  
}  
#cubeRotation .second {  
-webkit-transform: rotateY(90deg) translateZ(225px);  
-moz-transform: rotateY(90deg) translateZ(225px);  
-ms-transform: rotateY(90deg) translateZ(225px);  
transform: rotateY(90deg) translateZ(225px);  
}  
#cubeRotation .third {  
-webkit-transform: rotateY(180deg) translateZ(225px);  
-moz-transform: rotateY(180deg) translateZ(225px);  
-ms-transform: rotateY(180deg) translateZ(225px);  
transform: rotateY(180deg) translateZ(225px);  
}  
#cubeRotation .fourth {  
-webkit-transform: rotateY(-90deg) translateZ(225px);  
-moz-transform: rotateY(-90deg) translateZ(225px);  
-ms-transform: rotateY(-90deg) translateZ(225px);  
transform: rotateY(-90deg) translateZ(225px);  
}  
.circle {  
border-radius: 50%;  
display: inline-block;  
margin-right: 20px;  
}  
#outerCircle {  
width: 50px;  
height: 50px;  
background: blue;  
position: relative;  
}  
#innerCircle {  
width: 20px;  
height: 20px;  
background: orange;  
position: absolute;  
top: 24%;  
left: 24%;  
display: block;  
border: 3px solid #fff;  
}     
.selected{  
background: red !important;  
}  
</style>  
<script>  
$(document).ready(function() {  
$("#controls").on('click', 'div', function(){  
$("#cubeRotation").css("transform","rotateY("+($(this).index() * -90)+"deg)");  
$("#controls div").removeClass("selected");  
$(this).addClass("selected");  
});            
});  
</script>  
</head>  
<body>  
<div>  
<h2>3D Image slider</h2>  
<h3>Happy Diwali</h3>        
<div id="cubeRound">  
<div id="cubeRotation">  
<figure class="face first">  
<img src="Images/lakshmiGanesh.jpg" />  
<figcaption>We worship Lakshmi and Ganesh on Diwali.</figcaption>  
</figure>  
<figure class="face second">  
<img src="Images/sweets.jpg" />  
<figcaption>We distribute sweats and gifts to our friends and relatives.</figcaption>  
</figure>  
<figure class="face third">  
<img src="Images/sitaRam.jpg" />  
<figcaption>Diwali is celebrated in memory of Ram return to Ayodhya.</figcaption>  
</figure>  
<figure class="face fourth">  
<img src="Images/crackers.jpg" />  
<figcaption> We lighten crackers on diwali. please use less crackers.</figcaption>  
</figure>  
</div>  
</div>  
<div id="controls">      
<div id="outerCircle" class="circle selected">  
<div id="innerCircle" class="circle"> 1</div>  
</div>  
<div id="outerCircle" class="circle">  
<div id="innerCircle" class="circle"> 2</div>  
</div>  
<div id="outerCircle" class="circle">  
<div id="innerCircle" class="circle">  3</div>  
</div>  
<div id="outerCircle" class="circle">  
<div id="innerCircle" class="circle">  4</div>  
</div>  
</div>  
<h3>Click above to see rotation of Image.</h3>  
</div>  
</body>  
</html>  

 

 برگرفته از : https://www.c-sharpcorner.com

 

جالب است بخوانید

طرز تبدیل HTML به WordPress

9 چیز که باید در مورد HTML5 بدانید

ایجاد یک فرم HTML و ویژگی تکمیل خودکار فرم ها

چگونه یک عنصر از اجزاء React را دریافت کنیم ؟

 

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات