CSS flip a letter upside down

[toolman]

Hi there,

I am trying to flip one letter upside down, but I can’t seem to get the CSS to work.

This is what I have. Can anyone see what I have wrong?

Thank you.

<h1 class="logo">A<span class="flip">B</span></h1>

.logo{
	font-family: 'Montserrat', sans-serif;
	font-size: 150px;
	letter-spacing: -5px;
	font-weight: 900
}
.flip {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

[SamA74]

It’s a span which is an inline element. You can’t transform an inline element.
Try adding display: inline-block; to the flip class.

[toolman]

Awesome, thank you that worked!