CSS - אנימציה תמונה


במעבר עכבר מעל תמונה נבצע שינוי לתמונה : סיבוב, הגדלה, צל, תמונה מסתובבת על ציר ועוד אפרויות שונות. כל זה בעזרת כתיבת CSS בלבד.









סיבוב התמונה במעלות


CSS - אנימציה תמונה סיבוב


CSS - (30deg) מתייחסת למעלות את הסיפרה נשנה לפי הצורך. 
/*------סיבוב תמונה 30 מעלות------*/
#H2D-hand_rotate {
 -webkit-transition: all .5s ease-in-out;
 -moz-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out; 
} 
 
#H2D-hand_rotate:hover {
 -webkit-transform: rotate(30deg);
 transform: rotate(30deg);
}

HTML - החליפו את כתובת התמונה וגודל התמונה המסומנים בירוק 
<div id="H2D-hand_rotate">
<img src="https://dl.dropboxusercontent.com/u/23093041/_H2D/images/OK-Hand.jpg" 
alt="OK Hand" width="150" height="150" />
</div>



סיבוב התמונה 3D על ציר Y.


CSS - אנימציה תמונה סיבוב 3D ציר Y

CSS - ניתן לסובב באותו אופן על ציר X וציר Z. 
/*-------סיבוב התמונה 3D על ציר Y------*/
#H2D-myPics_flip  {
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
} 
 
#H2D-myPics_flip:hover {
 transform: rotateY(180deg);
 -ms-transform: rotateY(180deg); 
 -webkit-transform: rotateY(180deg);
}

HTML - החליפו את כתובת התמונה וגודל התמונה המסומנים בירוק 
<div id="H2D-myPics_flip">
<img src="https://dl.dropboxusercontent.com/u/23093041/_H2D/images/OK-Hand.jpg"
 alt="OK Hand" width="150" height="150" />
</div>



הגדלת התמונה - זום


CSS - אנימציה תמונה הגדלת תמונה - זום


CSS - שנו את המספר 1.2 שמתייחס לגודל התמונה 
#H2D-myPics_scale {
 -webkit-transition: all .5s ease-in-out;
 -moz-transition: all .5s ease-in-out;
 -ms-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
} 
 
#H2D-myPics_scale:hover {
 transform: scale(1.2);
 -ms-transform: scale(1.2);
 -webkit-transform: scale(1.2);
}

HTML - החליפו את כתובת התמונה וגודל התמונה המסומנים בירוק.
<div id="H2D-myPics_scale">
<img src="https://dl.dropboxusercontent.com/u/23093041/_H2D/images/OK-Hand.jpg" 
alt="OK Hand" width="150" height="150" />
</div>
פורסם על ידי
תוויות:

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)