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

موضوع: کد های اماده transform

  1. #1
    Mr.Al!Reza آنلاین نیست.
    Mr.Al!Reza
    کاربر سايت
    54نوشته18مورد پسند

    تاریخ عضویت
    Mar 2015
    شماره عضویت
    8443
    پسندیده است
    16 پست
    بلاگ
    پست
    میزان امتیاز
    28
    No Set

    کد های اماده transform

    سلام دوستان

    کد های آماده ی transform رو از css3 براتون میزارم

    فقط این کد ها توی مروگر قدیمی نمایش داده نمیشند که باید از کد های زیر استفاده کرد :

    موزیلا : -moz-
    اپرا : -o-
    گوگل کروم و اینترنت اکسپلورر : -webkit-

    برای دموی انلاین کد ها رو کپی و درون ادیتور آنلاین ویکی وی بی بزارید

    کد HTML:
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    .box {
        width:280px;
        height:200px;
        background-color:#B90003;
        margin:auto;
        margin-top:90px;
        color:#FFFFFF;
        text-align:center;
        padding-top:10px;
        font-size:30px;                                            
    }
    #box1{    
        transition-duration:2s;
    }
    #box1:hover { /* دوران تصویر */ 
        transform:rotate(40deg);                                    
    }
    #box2 { 
        transition-duration:2s;
    }
    #box2:hover { /* بزرگنمایی */ 
        transform:scale(1.3,1.5);
        /*
        عدد اول = ارتفاع 
        عدد دوم = عرض 
        */                                    
    }
    #box3 { /*ایجاد ثانیه برای انتقال */
        transition-duration:2s;
    }
    #box3:hover { /* انتقال تصویر */ 
        transform:translate(40px,80px);                            
    }
    #box4 { 
        transition-duration:2s;
    }
    #box4:hover { /* کشیدگی تصویر */ 
        transform:skew(30deg,40deg)                              
    }
    #box5 { 
        transition-duration:2s;
    }
    #box5:hover { /* کشیدگی تصویر */ 
        transform: rotate(40deg) translate(40px,80px) scale(1.3,1.5);
    } 
    </style>
    </head>
    <body>
    <div class="box" id="box1">
    دوران تصویر
    </div>
    <div class="box" id="box2">
    بزرگنمایی تصویر
    </div>
    <div class="box" id="box3">
     انتقال تصویر
    </div>
    <div class="box" id="box4">
    کشیدگی تصویر</div>
    <div class="box" id="box5">
    همه کد ها</div>
    </body>
    </html>

    کاربر زیر پست Mr.Al!Reza را پسندیده است:



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

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

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

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

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

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

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