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


קובע איך לסדר את האובייקים בחלל תלת מימדי.


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


<!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;
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

#div3 {
    padding: 40px;
    position: absolute;
    border: 1px solid black;
    background-color: yellow;
    -webkit-transform: rotateY(-60deg); /* Chrome, Safari, Opera */
    transform: rotateY(-60deg);
}
</style>
<meta charset="utf-8"/>
</head>
<body>
    <div id="div1">
        <div id="div2">HELLO
            <div id="div3">YELLOW</div>
        </div>
    </div>
</body>
</html>

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


chrome logo
explorer logo
edge logo
firefox logo
safari logo
opera logo
36.0
11.0
כן
16.0
9.0
23.0

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


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


3


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


flatנעדכן בקרוב את תאור הערך.
inheritמגדיר את הערך שיורש מההורה.
initialמגדיר את המאפיין לערך ברירת המחדל שלו.
preserve-3dנעדכן בקרוב את תאור הערך.

השאר תגובה