۱۳۹۳ فروردین ۶, چهارشنبه

انيميشن با CSS3

انیمیشن با CSS3


CSS3 به ما اجازه مي دهد تا اشكالي هندسي را در هنگام طراحی وب سایت بسازيم و به صورت تدريجي آن را تغيير دهيم در اين صورت مي توانيم انيميشن هاي جالب و زیبایی ایجاد کنیم.
اين در گذشته به طور معمول با جاوا اسكريپت و  جي كوئري انجام مي شد.
HTML
<div id="square">
<p> من مستطيلي يا مربعي هستم كه 180 درجه خواهم چرخيد </p>
</div>
CSS
#square {
    padding:20px 0px;
    width:100px;
    background:#218ad8;
    text-align:center;
    -moz-transition: all 2s; /* Firefox 4 */
    -webkit-transition: all 2s; /* Safari and Chrome */
    -o-transition: all 2s; /* Opera */
}
#square:hover {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    width:500px;
    color:white;
}
#square:hover p {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
همانطور که مشاهده كرديد هنگامي كه موس بر روي عنصر مي رود يك چرخش 180 درجه زيبا بر روي آن اعمال مي شود حتي مي توانيم با تعيين خواص بيشتر در لايه اصلي و hover و يا يكي از لايه اين انتقال را جذابتر كنيم.
ارسال شده توسط در

هیچ نظری موجود نیست:

ارسال یک نظر

اشتراک در: نظرات پیام (Atom)