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 CSS syntaxe

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 CSS exemple

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