28172 sujets

CSS et mise en forme, CSS3

Problème d'ancrage en transition CSS

Bonjour à tous !

Je viens vers vous car j'ai un petit souci et malgré ma persévérance en essayant pas mal de chose, je n'arrive pas à résoudre ce problème.

Mon code est le suivant :

<body>

	<div class="accueil">
    	<div class="contenu_accueil">

			<div class="logo_accueil">
    			
    			<img src="logo_03.png" id="logo" />
    			
			</div>

		
        </div>
	</div>

</body>


Et mon css...

.accueil
	{
		text-align:center;
	}
	
.contenu_accueil
	{
		margin-top:200px;
	}
	
	
.logo_accueil 
	{
		-webkit-transition: all 2s;
		-webkit-transition-timing-function:ease;
		-moz-transition: all 2s;
		-moz-transition-timing-function:ease;
	}
.logo_accueil:hover
	{
		-webkit-transform: rotate(1080deg);
		-webkit-transition-timing-function:ease;
		-moz-transform: rotate(1080deg);
		-moz-transition-timing-function:ease;
	}
	
	
.logo_accueil:after
	{ 
	
	content: url(bouguygraph_06.png);
	position:relative; 
	top: 120px; 
	left:-14px; 
	opacity:0; 
	transition: opacity 2s;
	
	}
	
.logo_accueil:hover:after
	{
		opacity: 1;
		transition: opacity 1s 1s;
	}


J'aimerais obtenir ma première image (logo_03) au centre de ma page tournant sur elle-même quand je passe le curseur dessus et mon image (bouguygraph_06), tournant avec la première, et arrivant à une opacité complète juste avant l'arrêt de logo_03.

En ce moment, mon logo et mon nom tourne ensemble (comme s'il s'agissait d'un seul et même objet). C'est justement ça le problème, j'aimerais que ces deux objets tourne mais avec un ancrage au centre de mon logo.

Je ne sais pas si je m'exprime correctement mais si vous avez la moindre question sur ce que je veux, n'hésitez surtout pas.

Merci beaucoup d'avance à cette communauté avec qui j'apprend énormément.
Modifié par BouguyGraph (04 Jun 2014 - 23:21)
Bonjour,

Eh bien déjà je n'utilise pas les ":after" et ":before" mais je les ai vu pas mal et je crois que tu oubli un ' : ' devant => "::after" et non ":after"

Ensuite, si tu veux faire 2 éléments différents il faut les séparer pour pouvoir impacter l'un sans impacter l'autre. Et si tu veux mettre l'ensemble au centre, mettre les 2 éléments séparés dans un seul block.
Comme ceci :

<body>
<div id="ensemble">
	<div class="accueil">

	</div>

    	<div class="contenu_accueil">

			<div class="logo_accueil">
    			
    			<img src="logo_03.png" id="logo" />
    			
			</div>

		
        </div>
</div>
</body>


Sinon c'est sur le CSS qu'il faut jouer si les deux choses doivent être imbriquées

Tu peux par exemple:

-> définir un délai avec 'transition-delay' sur ce qui doit apparâitre au-dessus de l'image et une durée avec 'transition-duration' plus courte que celle de la rotation de l'image


Et je crois qu'il y a encore une petite erreur de code


.logo_accueil:hover:after
	{
		opacity: 1;
		transition: opacity 1s 1s;  /* ici */
	}


/* j'écrirai : */
.logo_accueil:hover:after
	{
		opacity: 1;
		transition: 1s opacity 1s;  /* durée - propriété - délai ,  si je ne me trompe pas*/
	}



Voilà j'espère que ça t'aidera sinon n'hésite pas, et si je n'ai pas répondu met un schéma, ou alors un endroit pour tester le code ^^

Bonne journée ! Smiley smile
Sujet clos
Aller à