IMPORTANT: l’icône ne pivotera que si la propriété CSS display: inline-block; lui est appliquée!
IMPORTANT #2: appliquer la transformation sur la classe de l’élément ciblé et pas sur la pseudo-classe :before utilisée par les polices d’icônes.
|
1 2 3 4 5 6 7 8 9 10 |
@mixin rotate($degrees) { display: inline-block; -webkit-transform: rotate($degrees); //-moz-transform: rotate($degrees); -ms-transform: rotate($degrees); //-o-transform: rotate($degrees); transform: rotate($degrees); //-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})"; //filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)}); } |
|
1 2 3 |
.rotate { @include rotate(90deg); } |