CODEWITHSUNDEEP
cssrotation
Akira Dawson
Akira Dawson

Reputation: 1267

CSS3 rotate parent div but keep content horizontal

I have the following HTML as,

<a href="#" class="outer"><span class="inner">Text</span></a>

I am trying to apply a background color and rotate it at 45 degrees to look like a diamond using the transform property. But I want the text to stay horizontal But I don't know how to achieve this. I have tried:

.outer{
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-45deg);
    background-color:#fdc300;
    width:70px;
    height:70px;
    position:relative;
    display:inline-block;
}
.inner{
    color:#FFF;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform:  translateX(-50%) translateY(-50%) rotate(45deg);
}

and other failed attempts and getting nowhere. Any help would be appreciated

Upvotes: 1

Views: 2242

Answers (1)

lmgonzalves
lmgonzalves

Reputation: 6588

You need to set display: inline-block to span.inner:

.inner{
    display: inline-block;
}

DEMO

EDIT:

To center text you also need:

.inner{
    position: relative;
    left: 50%;
    top: 50%;
}

DEMO2

Upvotes: 1

Related Questions