Bonjour, je voudrais faire la rotation d'une div avec un transform-origin:center mais il ce déplace alors que je veux qu'il reste au centre

Le code

<div id="X"></div>
<div id="Y"></div>
<div class="line"></div>
<style type="text/css">
	body{
		overflow: hidden;
	}
	div#X{
		position: absolute;
		left: 0%;
		top: 50%;
		transform: translateY(-50%);
		width:100%;
		height: 2px;
		background-color: black;
		z-index: 1;
	}
	div#Y{
		position: absolute;
		left: 50%;
		top: 0%;
		transform: translateX(-50%);
		width:2px;
		height: 100%;
		background-color: black;
		z-index: 1;
	}
	div.line{
		position: absolute;
		left:calc(50%);
		top: 0px;
		width: 2px;
		height: 300%;
		background-color: blue;
		transform: translateX(-50%);
		transform: rotate(45deg);
		transform-origin:center;
		z-index: 2;
	}
</style>

Merci pour vos réponses

-
Edité par Stefos 14 juillet 2019 à 12:35:39

div.line {
        position: absolute;
        left: 0%;
        top: 50%;
        width:100%;
        height: 2px;
        background-color: blue;
        transform: rotate(135deg); /* <-- CHANGES AVEC AUTRE ANGLE ICI, SI BESOIN  */
        z-index: 2;
}

https://www.w3schools.com/CSSref/trycss3_transform-origin_inuse.htm

-
Edité par MilenAtanasov 14 juillet 2019 à 13:47:15

Bonjour Stefos ,

1) Quand tu utilises transform il faut mettre tes fonctions dans un seul transform :

transform : translateX(-50%) rotate(45deg);

2) pour moi, transform-origin:center est bien pris en compte c'est juste ton height : 300% qui "fausse"  le centre.

Un exemple avec 100% :

https://codepen.io/Zonecss/pen/KjjQzO

Si je fais les 100% et non les 300% la hauteur de div.line n'atteint pas le bord supérieur et inférieur de l'écran il est limité alors que je veux qu'il ne le soit pas.

Bonjour Stefos ,

dans ce cas je pense que le code est le suivant :

height: 100%; 
transform: translateX(-50%) scaleY(3) rotate(45deg)

Bonjour, Si je fais cela et que je fais un angle de 90deg div.line n'atteint pas le bord gauche et droit de l'écran