propriété d'origine de la transformation CSS
Résultats de traduction：
transform
English [trænsˈfɔ:m] US [trænsˈfɔ:rm]
vt.Change; change
vi.Change
n.[Number]Transformation
origin
English[ ˈɒrɪdʒɪn] 美[ˈɔ:rɪdʒɪn]
n. Origine, racine [numéro] origine, [solution] (tendon, nerf) point de départ
.propriété d'origine de la transformation CSSsyntaxe
Fonction : L'attribut transform-origin vous permet de changer la position de l'élément en cours de transformation. Les éléments de transformation 2D modifient les axes x et y de l'élément. Les éléments de transformation 3D peuvent également modifier leur axe Z. Pour mieux comprendre la propriété transform-origin, consultez cette démo. Utilisateurs de Safari/Chrome : pour mieux comprendre comment la propriété transform-origin est utilisée pour les transformations 3D, consultez cette démo.
Syntaxe : transform-origin : axe x axe y axe z
Description : axe x Définit où la vue est placée sur l'axe X. Valeurs possibles : gauche centre droite longueur % axe y Définit où sur l'axe Y la vue est placée. Valeurs possibles : haut centre bas longueur % axe z Définit où sur l'axe Z la vue est placée. Valeurs possibles : length
Notes : Cet attribut doit être utilisé avec l'attribut transform.
propriété d'origine de la transformation CSSexemple
Instance
<!DOCTYPE html>
<html>
<head>
<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: yellow;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne