המאפיין transform
ב-CSS מאפשר לבצע שינויי גיאומטריה על אלמנטים, כולל סיבוב, התפשטות, הזזה והטיה. המאפיין מקבל ערכים שונים המגדירים את השינויים הרצויים.
rotate(45deg)
.scale(1.5, 1.5)
.translate(50px, 50px)
.skew(30deg, 20deg)
.matrix(1, 0, 0, 1, 50, 50)
.transform
. ערכים: flat
, preserve-3d
.border-box
, fill-box
, view-box
, content-box
.transform-origin-x
, transform-origin-y
, ו-transform-origin-z
כדי לקבוע את האזורים הספציפיים.באמצעות transform
ניתן ליצור אפקטים חזותיים מתקדמים כמו סיבוב, התפשטות והזזה של אלמנטים בצורה פשוטה. השימוש הנפוץ כולל יצירת אפקטים כמו כרטיסים המסתובבים, אובייקטים שמתפשטים בעת חידוש, ועוד.
להלן דוגמה לשימוש במאפיין transform
:
באמצעות transform
ניתן ליצור אפקטים גיאומטריים שונים ולשלוט על מיקום האלמנט, צורתו וגודלו בצורה מדויקת. ניתן לשלב מספר פונקציות של transform יחד כדי להשיג אפקטים מורכבים.
<style>
.transform-example {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg) scale(1.5) translate(50px, 50px);
transform-style: preserve-3d;
transform-origin: center center;
}
</style>
<div class="transform-example">
דוגמה ל-transform
</div>
רק רגע