خانه / Uncategorized / اموزش طراحی اسلایدر 3D

اموزش طراحی اسلایدر 3D

در این بخش از دوره آموزشی همان‌طور که قول داده بودیم قرار بر این بود که بعد از مباحث Transition ,Transform و به همراه انتخاب‌گرها (Selectors) یک اسلایدر 3D طراحی کنیم.

https://www.aparat.com/v/yCVJb

<section id=“count”>
  <div id=“slider”>
    <figure tabindex=“1” id=“fig1”>
      <figcaption>Slide 1</figcaption>
      <figure tabindex=“2” id=“fig2”>
        <figcaption>Slide 2</figcaption>
        <figure tabindex=“3” id=“fig3”>
          <figcaption>Slide 3</figcaption>
          <figure tabindex=“4” id=“fig4”>
            <figcaption>Slide 4</figcaption>
            <figure tabindex=“5” id=“fig5”>
              <figcaption>Slide 5</figcaption>
              <figure tabindex=“6” id=“fig6”>
                <figcaption>Slide 6</figcaption>
                <figure id=“bx”> <img src=“images/face1.jpg”> <img src=“images/face2.jpg”> <img src=“images/face3.jpg”> <img src=“images/face4.jpg”> <img src=“images/face5.jpg”> <img src=“images/face6.jpg”> </figure>
              </figure>
            </figure>
          </figure>
        </figure>
      </figure>
    </figure>
  </div>
</section>

 


 

خب همان‌طور که می‌بینید ما 6 button با تگ figcaption ایجاد کردیم که اگر دقت کنید تمام این تگ های figcaption در داخل تگ های figure هستند که هر کدام از اسلاید ها با هرکدام از button ارتباط ایجاد کنند. سپس تمام عکس های مکعب مستطیل رو داخل سورس کد قرار دادیم.

 

کد

کد

#bx img {
position: absolute;
top: 0;
left: 0;
}
#bx img:nth-child(1) {
transform: rotateX(0deg) translateZ(200px);
webkittransform: rotateX(0deg) translateZ(200px);
moztransform: rotateX(0deg) translateZ(200px);
otransform: rotateX(0deg) translateZ(200px);
}
#bx img:nth-child(2) {
transform: rotateX(180deg) translateZ(200px);
webkittransform: rotateX(180deg) translateZ(200px);
moztransform: rotateX(180deg) translateZ(200px);
otransform: rotateX(180deg) translateZ(200px);
}
#bx img:nth-child(3) {
transform: rotateX(90deg) translateZ(200px);
webkittransform: rotateX(90deg) translateZ(200px);
moztransform: rotateX(90deg) translateZ(200px);
otransform: rotateX(90deg) translateZ(200px);
}
#bx img:nth-child(4) {
transform: rotateX(90deg) translateZ(200px);
webkittransform: rotateX(90deg) translateZ(200px);
moztransform: rotateX(90deg) translateZ(200px);
otransform: rotateX(90deg) translateZ(200px);
}
#bx img:nth-child(5) {
transform: rotateY(90deg) translateZ(200px);
webkittransform: rotateY(90deg) translateZ(200px);
moztransform: rotateY(90deg) translateZ(200px);
otransform: rotateY(90deg) translateZ(200px);
}
#bx img:nth-child(6) {
transform: rotateY(90deg) translateZ(700px);
webkittransform: rotateY(90deg) translateZ(700px);
moztransform: rotateY(90deg) translateZ(700px);
otransform: rotateY(90deg) translateZ(700px);
}
#fig1:focus #bx {
transform: translateZ(200px) rotateY(0deg);
webkittransform: translateZ(200px) rotateY(0deg);
moztransform: translateZ(200px) rotateY(0deg);
otransform: translateZ(200px) rotateY(0deg);
}
#fig2:focus #bx {
transform: translateZ(200px) rotateX(180deg);
webkittransform: translateZ(200px) rotateX(180deg);
moztransform: translateZ(200px) rotateX(180deg);
otransform: translateZ(200px) rotateX(180deg);
}
#fig3:focus #bx {
transform: translateZ(200px) rotateX(90deg);
webkittransform: translateZ(200px) rotateX(90deg);
moztransform: translateZ(200px) rotateX(90deg);
otransform: translateZ(200px) rotateX(90deg);
}
#fig4:focus #bx {
transform: translateZ(200px) rotateX(90deg);
webkittransform: translateZ(200px) rotateX(90deg);
moztransform: translateZ(200px) rotateX(90deg);
otransform: translateZ(200px) rotateX(90deg);
}
#fig5:focus #bx {
transform: translateZ(450px) rotateY(90deg);
webkittransform: translateZ(450px) rotateY(90deg);
moztransform: translateZ(450px) rotateY(90deg);
otransform: translateZ(450px) rotateY(90deg);
}
#fig6:focus #bx {
transform: translateZ(450px) rotateX(90deg);
webkittransform: translateZ(450px) rotateX(90deg);
moztransform: translateZ(450px) rotateX(90deg);
otransform: translateZ(450px) rotateX(90deg);
}

 

مهم ترین بخش استایل perspective: 800 می‌باشد که در این نما میتوانیم اشیا را به صورت سه بعدی ببینیم. ما به این نما برای ساخت فضای سه بعدی نیاز داریم. به طور کلی ما اگر بخواهیم یک المان را در صفحه وب 3D طراحی کنیم از perspective استفاده می‌کنیم.

کدهایی دیگر رو هم در اینجا می‌توانید ببینید که در فیلم آموزشی به طور کامل برای شما کاربران گرامی توضیح داده شده است.

#bx img {
position: absolute;
top: 0;
left: 0;
}
#bx img:nth-child(1) {
transform: rotateX(0deg) translateZ(200px);
-webkit-transform: rotateX(0deg) translateZ(200px);
-moz-transform: rotateX(0deg) translateZ(200px);
-o-transform: rotateX(0deg) translateZ(200px);
}
#bx img:nth-child(2) {
transform: rotateX(180deg) translateZ(200px);
-webkit-transform: rotateX(180deg) translateZ(200px);
-moz-transform: rotateX(180deg) translateZ(200px);
-o-transform: rotateX(180deg) translateZ(200px);
}
#bx img:nth-child(3) {
transform: rotateX(90deg) translateZ(200px);
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
-o-transform: rotateX(90deg) translateZ(200px);
}
#bx img:nth-child(4) {
transform: rotateX(-90deg) translateZ(200px);
-webkit-transform: rotateX(-90deg) translateZ(200px);
-moz-transform: rotateX(-90deg) translateZ(200px);
-o-transform: rotateX(-90deg) translateZ(200px);
}
#bx img:nth-child(5) {
transform: rotateY(-90deg) translateZ(200px);
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
}
#bx img:nth-child(6) {
transform: rotateY(90deg) translateZ(700px);
-webkit-transform: rotateY(90deg) translateZ(700px);
-moz-transform: rotateY(90deg) translateZ(700px);
-o-transform: rotateY(90deg) translateZ(700px);
}
#fig1:focus #bx {
transform: translateZ(-200px) rotateY(0deg);
-webkit-transform: translateZ(-200px) rotateY(0deg);
-moz-transform: translateZ(-200px) rotateY(0deg);
-o-transform: translateZ(-200px) rotateY(0deg);
}
#fig2:focus #bx {
transform: translateZ(-200px) rotateX(-180deg);
-webkit-transform: translateZ(-200px) rotateX(-180deg);
-moz-transform: translateZ(-200px) rotateX(-180deg);
-o-transform: translateZ(-200px) rotateX(-180deg);
}
#fig3:focus #bx {
transform: translateZ(-200px) rotateX(-90deg);
-webkit-transform: translateZ(-200px) rotateX(-90deg);
-moz-transform: translateZ(-200px) rotateX(-90deg);
-o-transform: translateZ(-200px) rotateX(-90deg);
}
#fig4:focus #bx {
transform: translateZ(-200px) rotateX(90deg);
-webkit-transform: translateZ(-200px) rotateX(90deg);
-moz-transform: translateZ(-200px) rotateX(90deg);
-o-transform: translateZ(-200px) rotateX(90deg);
}
#fig5:focus #bx {
transform: translateZ(-450px) rotateY(90deg);
-webkit-transform: translateZ(-450px) rotateY(90deg);
-moz-transform: translateZ(-450px) rotateY(90deg);
-o-transform: translateZ(-450px) rotateY(90deg);
}
#fig6:focus #bx {
transform: translateZ(-450px) rotateX(-90deg);
-webkit-transform: translateZ(-450px) rotateX(-90deg);
-moz-transform: translateZ(-450px) rotateX(-90deg);
-o-transform: translateZ(-450px) rotateX(-90deg);
}

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

%d وب‌نوشت‌نویس این را دوست دارند: