خبرهای کوتاه
مردان وردپرس آموزش Front-End آموزش چرخش یک شی با CSS3

با عرض سلام من صادق مهدی لو هستم و در این آموزش قصد دارم نحوه چرخش یک شی رو با استفاده از CSS3  بهتون آموزش بدم،‌ با مردان وردپرس همراه باشید.

یکی از امکانات جدیدی که به CSS3 اضافه شده این هست که شما میتونید یک شی رو با هر زاویه ای که دلتون می خواد بچرخونید به نمونه زیر دقت کنید:

 

در این مثال ما اومدیم یک انیمیشن با نام rotation تعریف کردیم که در یک بازه ۴ ثانیه ۳۶۰ درجه می چرخه و حالت اون رو هم حالت تکرار گذاشتیم که وقتی به انتها میرسه دوباره تکرار میشه.

خوب حالا فرض بگیرید شما می خواید عقربه ثانیه شمار ساعت رو شبیه سازی کنید برای این که می تونید از روش بالا استفاده کنید اما یک مشکلی هست اینه که شی ما از وسط میچرخه و برای این که کاری کنیم از گوشه بچرخه باید یک خاصیت دیگه نیز بهش اضافه کنیم به کد زیر دقت کنید:

 

 

 

 

 

همونطور که در کد بالا دیدید با اضافه کردن خاصیت transform-origin و مقدار دادن به اون تونستیم تعیین کنیم که چرخش از کدوم ناحیه صورت بگیره.

منبع :‌ مردان وردپرس
تاریخ آخرین بروزرسانی : ۱۴ دی ۱۳۹۵
برچسب ها:, , , ,
30نظر برای

آموزش چرخش یک شی با CSS3


  1. سلام، وقت به خیر
    من یه نمونه از چرخش لوگو دارم، می خوام لوگوی سایتم مثل این نمونه بشه:
    https://mihanwp.com
    یعنی با باز شدن صفحه سایت و هر بار هم که رفرش میشه یه بار بچرخه.
    آدرس سایتم اینه:
    https://forfile.ir
    کد css سایت نمونه رو هم توی استایل گذاشتم، ولی کار نمی کنه! آیا کار دیگه ای هم لازمه؟
    ممنون میشم بفرمایین چه کدی رو باید بذارم، چند تا کد تست کردم ولی نشد.
    اینم کد استایل مورد نظر:
    .logoo {
        text-align: center;
        color: #fff;
    }
    .logo {
        width: 120px;
        height: 120px;
        margin: 10px auto;
        display: block;
        background: url(images/arm.png) no-repeat center;
        transition-duration: .8s;
        animation-name: logo;
        animation-duration: 1s;
        animation-delay: 2s;
    }
    .logo:hover {
        transform: rotate(330deg);
    }
    .site-title {
        width: 100%;
        height: 86px;
        display: block;
        background: url(images/mw.png) no-repeat center;
    }
    تشکر

    • صادق مهدی لو

      کد زیر را به کلاس لوگو اضافه کنید

      کد بالا باعث ایجاد چرخش ۱۸۰ درجه ای لوگو پس از وقفه ۴ ثانیه ای می شود می توانید چرخش را به هر مقدار دیگری تغییر دهید.

      • اضافه کردم، کد رو به فایل استایل سی اس اس اضافه کردم، ولی کار نمی کنه. میشه راهنمایی کنین که کد کاملش چی میشه و توی کدام فایل بذارم؟ آیا حتماً باید آدرس لوگو هم وارد بشه یا نیازی نیست؟ به هر حال اگه یه چیز ناقص باشه کار نمی کنه.

        فایل استایل هست؛ فایل سی اس اس اصلی قالب هست که کدهای سی اس اس لوگو اونجا هم قرار دارن. کجا باید بذارم؟

        • صادق مهدی لو

          کد زیر را در فایل سی اس اس خود وارد کنید:

          • گذاشتم، اول اینکه لوگو رفت سمت چپ، دوم اینکه نوشته عنوان سایت برعکس شد، سوم اینکه هیچ چرخشی هم نداشت. الانم که لوگو رفته سمت چپ، با برداشتن کد هم سمت راست نمیاد.

          • صادق مهدی لو

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

  2. این کد آخری رو توی استایل گذاشتم، ولی چرخش انجام نمیشه؛ دلیلش چیه؟ فقط همین کد رو گذاشتم. کد دیگه ای نیاز نیست؟

    ممنون

    • ببینید چرخش انجام نمیشه، فقط نمایش لوگو ۱۸۰درجه شد، یعنی بدون چرخش، ۱۸۰ درجه کج شد. متوجه منظورم شدین؟

      • صادق مهدی لو

        اگر با کد بالا به نتیجه دلخواه نرسیدید می توانید از جاوااسکریپت و جی کویری هم کمک بگیرید به این صورت که اعلام کنید بعد از لود سایت ۲ ثانیه بعد لوگو به اندازه دلخواه چرخش داشته باشد به کد زیر توجه کنید:

        قسمت سی اس اس را به فایل استایل خود اضافه کنید تا یک کلاس به سایت تان اضافه شود سپس با کد جاوااسکریپت آن را پس از لود با تاخیر دو ثانیه به بخش مورد نظر اعمال کنید.

        • یعنی قسمت css این کد بدون قسمت جاوا رو به استایل اضافه کنم، قسمت جاوا اسکریپت رو کجا باید بذارم؟

          یا اینکه کد کامل رو به استایل اضافه کنم؟

          • صادق مهدی لو

            قسمت جاواسکریپت را به فوتر سایت اضافه کنید تا ران شود بخش سی اس اس را هم به فایل سی اس اس خود افزون کنید

          • متأسفانه نشد؛ در ضمن توی فایل css خط اول <!– Css Part –> ارور میده.

            ارور unspected token میده.

            جاوا رو در قسمت تنظیمات خود قالب، قسمت اسکریپت های فوتر گذاشتم، ولی نشد.

          • صادق مهدی لو

            اون دو خط کامنت را حذف کنید 

          • ممنون؛ فقط می خوام با هاور شدن موس روی لوگو هم چرخش داشته باشه، کد هاور چی باید بدم؟

            این کد هاور رو دادم، ولی هاور نمیشه.

            ممنون

          • ممنون؛ فقط می خوام با هاور شدن موس روی لوگو هم چرخش داشته باشه، کد هاور چی باید بدم؟

            این کد هاور رو دادم، ولی هاور نمیشه.

            .addAnimeRotate:hover {
                transform: rotate(360deg);
            }

            ممنون

  3. شما فقط یه لحظه لطف کنید این آدرس رو ببینید، متوجه میشین که من چه چیزی مد نظرمه:

    https://mihanwp.com

    وقتی صفحه باز میشه یا رفرش میشه ۳۶۰ درجه میچرخه، هر زمان هم با موس روی لوگو میری، باز هم ۳۶۰ درجه میچرخه.

    تشکر

  4. ممنون، یه تغییراتی دادم، درست شد؛ فقط می خوام با هاور شدن موس روی لوگو هم چرخش داشته باشه، کد هاور چی باید بدم؟

    تشکر

    • صادق مهدی لو

      برای اعمال چرخش در هنگام هاور مسیر را درست رفته اید فقط میزان چرخش را بیشتر کنید تا تغییر اتفاق بیفتد

      • اعداد مختلفی بهش دادم، ولی نمیشه.

        مثلاً:

        .addAnimeRotate:hover {
            transform: rotate(720deg);
        }

        • صادق مهدی لو

           گزینه !important را هم به آخر چرخش اضافه کنید تا الویت بالا به آن داده شود

          • .addAnimeRotate:hover {
                transform: rotate(720deg); !important
            }

            این کد رو گذاشتم؛ نشد و اینکه به خاطر ایمپورتنت ارور EXPECTED BRACE داد، البته ذخیره میشه، ولی خب این ارور هم هست. شما بهتر میدونید.

          • ممنون از لطف شما، درست شد، فقط ایرادی نداره که ارور EXPECTED BRACE میده؟

          • صادق مهدی لو

            خواهش می کنم ، امیدوارم همواره رو به رشد باشید.

            بنده در سایت مشکلی مشاهده نکردم.

  5. سلام آقای مهدی لو، وقت به خیر

    برای سایتم یه کد برای اینستاگرام می خوام؛ یه نمونه دارم؛ شما می تونین راهنماییم کنین؟

    آدرس: https://mihanwp.com

    زیر لوگوی این سایت که نوشته در اینستاگرام دنبال کنید؛ البته به صورت رندوم عوض میشه، مثلاً یه بار اینستاگرام میاد یه بار تلگرام؛ با رفرش شدن صفحه عوض میشن. عکسش رو دارم، ولی اینجا نمی تونم براتون بفرستم.

    ممنون میشم راهنمایی بفرمایید.

    • صادق مهدی لو

      سلام و عرض ادب

      لطفا بیشتر توضیح دهید و این که دقیقا به دنبال چه موردی هستید نمایش عکس به صورت رندوم ؟

      • نه، فقط اینستاگرام رو می خوام؛ منظورم این بود اگه اینستاگرام نشون داده نشد، به دلیل اینه که رندوم قرار داده، گاهی تلگرام میاد گاهی هم اینستاگرام. من کار به تلگرام ندارم. فقط می خوام توی سایدبار سایتم، مثل همین نمونه ای که فرستادم، اینستاگرام رو قرار بدم که کاربر بتونه با کلیک روی این قسمت، به صفحه اینستاگرام سایتم بره. فقط نمی خوام کد html باشه، با css باشه؛ ترکیب رنگ هم که از گرادیانت استفاده کرده؛ البته php رو نمی دونم!

        نمونه رو مشاهده کردین؟ تصویر رو چطور می تونم برای شما ارسال کنم؟

        ممنون

        • صادق مهدی لو

          منظور شما حالت انیمیشنی است که در حالت هاور اتفاق می افتد؟

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

          • نه؛ اگه امکانش هست یه پشتیبانی تلگرام بدین تا خیلی راحت تر و سریع تر توی تلگرام ارسال کنم. متأسفانه اینطوری نمیشه.

            ممنون

          • صادق مهدی لو

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

            @sadegh3333

  6. سلام.وبسایت خیلی خوبی دارید.خیلی خیلی ممنون

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.