תאור המאפיין transform-origin


קובע את המיקום של האובייקט שעבר שינוי צורה בעזרת transform.


קוד לדוגמה המציג את המאפיין transform-origin


<!DOCTYPE html>
<html>
<head>
    <title>כותרת האתר</title>
<style>
#div1 {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}
</style>
<meta charset="utf-8"/>
</head>
<body>
    <div id="div1">
        <div id="div2">HELLO</div>
    </div>
</body>
</html>

תמיכה בדפדפנים למאפיין transform-origin


chrome logo
explorer logo
edge logo
firefox logo
safari logo
opera logo
36.0
10.0
כן
16.0
9.0
32.0

המספר מתחת לאייקון של הדפדפנים מציין את הגרסה הראשונה שבה נתמכת המאפיין.


גרסת css למאפיין transform-origin


3


תכונות למאפיין transform-origin


bottomנעדכן בקרוב את תאור הערך.
centerנעדכן בקרוב את תאור הערך.
inheritמגדיר את הערך שיורש מההורה.
initialמגדיר את המאפיין לערך ברירת המחדל שלו.
leftנעדכן בקרוב את תאור הערך.
rightנעדכן בקרוב את תאור הערך.
topנעדכן בקרוב את תאור הערך.
unsetנעדכן בקרוב את תאור הערך.

השאר תגובה