/ اسلایدر 3بعدی به کمک css
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 3 از 3

موضوع: اسلایدر 3بعدی به کمک css

  1. #1
    HoneyWeb آنلاین نیست.
    HoneyWeb
    کاربر سايت
    74نوشته142مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    1962
    پسندیده است
    694 پست
    بلاگ
    پست
    میزان امتیاز
    152
    pasferto.com

    اسلایدر 3بعدی به کمک css

    3dcss.png
    درود

    در این مطلب می خواهیم به شما طرز ساختن یک اسلایدر 3بعدی را آموزش بدهیم
    برای این کار از کد های پایین استفاده کنید
    css
    کد:
    .stage{margin:1em auto;-webkit-perspective:1200px;-moz-perspective:1200px;-ms-perspective:1200px;perspective:1200px}
    
    
    .slide img,.slider img{position:absolute;border:1px solid #ccc;background:rgba(255,255,255,.8);box-shadow:inset 0 0 20px rgba(0,0,0,.2)}
    
    
    @-webkit-keyframes slider {
        from,15% { -webkit-transform: rotateY(0);       }
        20%,35%  { -webkit-transform: rotateY(-72deg);  }
        40%,55%  { -webkit-transform: rotateY(-144deg); }
        60%,75%  { -webkit-transform: rotateY(-216deg); }
        80%,95%  { -webkit-transform: rotateY(-288deg); }
        to       { -webkit-transform: rotateY(-360deg); }
      }@keyframes slider {
        from,15% {
          -moz-transform: rotateY(0);
          -ms-transform: rotateY(0);
          transform: rotateY(0);
        }
        20%,35%  {
          -moz-transform: rotateY(-72deg);
          -ms-transform: rotateY(-72deg);
          transform: rotateY(-72deg);
        }
        40%,55%  {
          -moz-transform: rotateY(-144deg);
          -ms-transform: rotateY(-144deg);
          transform: rotateY(-144deg);
        }
        60%,75%  {
          -moz-transform: rotateY(-216deg);
          -ms-transform: rotateY(-216deg);
          transform: rotateY(-216deg);
        }
        80%,95%  {
          -moz-transform: rotateY(-288deg);
          -ms-transform: rotateY(-288deg);
          transform: rotateY(-288deg);
        }
        to {
          -moz-transform: rotateY(-360deg);
          -ms-transform: rotateY(-360deg);
          transform: rotateY(-360deg);
        }
      }
    .slider {
    -webkit-animation-name: slider;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
    animation-name: slider;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }
    html
    کد:
    <div class="stage" style="width: 240px; height: 160px;">
    <div class="slider">
    <img style="-webkit-transform: rotateY(0deg) translateZ(165px); -moz-transform: rotateY(0deg) translateZ(165px); -ms-transform: rotateY(0deg) translateZ(165px); padding: 0px;" width="200" height="160" alt="مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی">
    <img style="-webkit-transform: rotateY(72deg) translateZ(165px); -moz-transform: rotateY(72deg) translateZ(165px); -ms-transform: rotateY(72deg) translateZ(165px); padding: 0px;" width="200" height="160" alt="مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی">
    <img style="-webkit-transform: rotateY(144deg) translateZ(165px); -moz-transform: rotateY(144deg) translateZ(165px); -ms-transform: rotateY(144deg) translateZ(165px); padding: 0px;" width="200" height="160" alt="مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی">
    <img style="-webkit-transform: rotateY(216deg) translateZ(165px); -moz-transform: rotateY(216deg) translateZ(165px); -ms-transform: rotateY(216deg) translateZ(165px); padding: 0px;" width="200" height="160" alt="مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی">
    <img style="-webkit-transform: rotateY(288deg) translateZ(165px); -moz-transform: rotateY(288deg) translateZ(165px); -ms-transform: rotateY(288deg) translateZ(165px); padding: 0px;" width="200" height="160" alt="مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی">
    </div>
    </div>

    demo:http://honeyweb.ir/amozesh/%D8%A2%D9...9%85%DA%A9-css
    توجه داشته باشید برای تغییر مدت زمان اسلایدر باید در .slider قسمت animation-duration را ویرایش کنید
    و برای قراردادن عکس src=”آدرس عکس” رو به عکس ها اضافه کنید

    کاربر زیر پست HoneyWeb را پسندیده است:


    ویرایش توسط HoneyWeb : 10-08-2014 در ساعت 06:20 PM
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    WikiVB Christmas... Cancelled مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. نوين وردپرس تبلیغات شما

  3. #2
    TORNADO آنلاین نیست.
    TORNADO
    کاربر سايت
    31نوشته8مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1484
    پسندیده است
    36 پست
    بلاگ
    پست
    میزان امتیاز
    18
    No Set
    سلام

    میخوام بالای سایت، تقریبا زیر ناوبار 3تا عکس پشت سر هم هی بیاد ... بره و تکرار بشه.

    راهنمایی میکنید؟ مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #3
    مهدی0331 آنلاین نیست.
    مهدی0331
    کاربر سايت
    110نوشته25مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3046
    پسندیده است
    37 پست
    بلاگ
    پست
    میزان امتیاز
    35
    nejebadiha.ir/forum.php
    میشه طریقه استفاده و کپی کردن کدها رو بگید که کجا باید بشه

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک