28172 sujets

CSS et mise en forme, CSS3

[Résolu] Transform: rotate(-1deg)

Bonjour !

J'essaie de transformer mon footer, en lui faisant faire une petite rotation (-1deg) pour qu'il ne soit pas tout à fait horizontal.

Il a une couleur (par exemple marron) qui est différente du reste du site, ce qui fait que quand il y a l'effet de rotation que je souhaite, il y a des vides (sans couleur marron), à gauche et en bas du footer qui reste évidemment rectangulaire.
Je ne trouve pas la solution (padding, margin ?) pour combler les 'trous' créés par ce rotate.

Voici mon footer :

<footer id="main-footer">
<div id="footer-bottom">
<div class="container clearfix">


upload/53642-Capturedae.png

Une idée pour résoudre ce problème ?

D'avance merci !
Bonjour,

Un margin négatif à gauche et à droite fera l'affaire.
Il te faudra un overflow: hidden sur le parent du footer.
Merci Raphi,

j'ai appliqué la proprieté overflow hidden à main-footer, et appliqué le rotate et les margin-top et bottom négatifs à footer-bottom + des bons padding pour laisser de la place au contenu,


/* Footer */
#main-footer {
	overflow: hidden;
}
#footer-bottom {
	background-color: #e5e0e0;
	border-top: 1px solid #afaea7;
	margin: 33px -5px -32px;
	padding-bottom: 55px;
	transform: rotate(-2deg);
}



Ça marche, merci bien ! Smiley cligne
Sujet clos
Aller à