28112 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer une animation CSS

Bonsoir, voilà je débute en animation CSS, et là je bute sur un problème depuis 2 jours :
l'effet que je recherche est bien bon avec ce code, mais pour y arrivé j'ai dû mettre des positions absolute, et ceci pose problème, je ne peux pas le centrer horizontalement dans mon template qui va contenir l'animation... (c'est une simple table)
J'ai bien tenté un "top:50%; translateX(-50%)" mais il saute dès que je met l'anim.
J'ai essayé l'équivalent en flex aussi, avec un "visibility:collapse; display:none" mais je suis arrivé sur des résultats vraiment incompréhensibles où il fonctionnait très bien sur firefox, mais pas du tout sur Chrome...

Est-ce que qqn aurait une solution pour centré cette animation ?


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>

<style type="text/css">

body{
	--BoxWidth :200px;
	--BoxHeight: 200px;
	--BoxBorderRaius : 20px;
	/* variable d'animation */
	--perspective: perspective(150px);
	--ScaleMin: scale(0.4);
	--RotateRecto: rotate3d(0,1,0,-90deg);
	--RotateVerso: rotate3d(0,1,0,90deg);
	--Rotate0: rotate3d(0,1,0,0deg);
	overflow: hidden;
	}

.divFlip{
	position: absolute;
	top:30px;
	left: 10px;
	width: var(--BoxWidth);
	height: var(--BoxHeight);
	border-radius: var(--BoxBorderRaius);
	text-align: center;
}

.divFlipRecto1{ background-color: aqua; }
.divFlipVerso2{ background-color: blue; }
.divFlipRecto3{ background-color: red; }
.divFlipVerso4{ background-color: yellow; }

.animflip-Recto1 { animation: animflip-Recto1 8s linear both infinite; }
@keyframes animflip-Recto1 {
 	0%  { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto);}
  	5%  { transform: var(--perspective) scale(1)        var(--Rotate0); }
	20% { transform: var(--perspective) scale(1)   		var(--Rotate0); }
	25% { transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }
	100%{ transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }	
}
	
.animflip-Verso2 { animation: animflip-Verso2 8s linear both infinite; }
@keyframes animflip-Verso2 {
 	0%  { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto); }
	25% { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto); }
	30% { transform: var(--perspective) scale(1) 		var(--Rotate0); }
	45% { transform: var(--perspective) scale(1) 		var(--Rotate0); }
	50% { transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }
	100%{ transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }
}

.animflip-Recto3 { animation: animflip-Recto3 8s linear both infinite; }
@keyframes animflip-Recto3 {
 	0%  { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto); }
  	50% { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto); }
	55% { transform: var(--perspective) scale(1) 		var(--Rotate0); }
	70% { transform: var(--perspective) scale(1) 		var(--Rotate0); }
	75% { transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }
	100%{ transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }
}
	
.animflip-Verso4 { animation: animflip-Verso4 8s linear both infinite; }
@keyframes animflip-Verso4 {
 	0%  { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto); }
  	75% { transform: var(--perspective) var(--ScaleMin) var(--RotateRecto); }
	80% { transform: var(--perspective) scale(1) 		var(--Rotate0); }
	95% { transform: var(--perspective) scale(1) 		var(--Rotate0); }
	100%{ transform: var(--perspective) var(--ScaleMin) var(--RotateVerso); }
}

</style>
	
<body>
<div class="divFlipRecto1 divFlip animflip-Recto1">Produit 1</div>
<div class="divFlipVerso2 divFlip animflip-Verso2">Produit 2</div>
<div class="divFlipRecto3 divFlip animflip-Recto3">Produit 3</div>
<div class="divFlipVerso4 divFlip animflip-Verso4">Produit 4</div>
</body>
</html>
Bonjour,

Tu peux essayer d'utiliser la fonction calc() sur la propriété left de la classe .divFlip pour définir la position à 50% du bord gauche moins la moitié de la largeur de l'élément :

.divFlip {
	position: absolute;
	top: 30px;
	left: calc(50% - var(--BoxWidth) / 2);
	width: var(--BoxWidth);
	height: var(--BoxHeight);
	border-radius: var(--BoxBorderRaius);
	text-align: center;
}

Modifié par Pitet (23 Jun 2022 - 12:53)
Meilleure solution
Merci beaucoup Pitet !
je n'utilise pas très souvent la fonction calc et je n'y avais pas pensé, mais quand j'ai lu ton message ça m'a paru évident !
Encore merci !
Prévenir un modérateur
Répondre au sujet
Aller à