Rotating text in elements [CSS]

Hi all,

I’m trying to use vertical native progress bars (rotated -90 dgs).
Every element within the progress bar rotates along the parent element. But I want to single the text within the label out to stay horizontal. I’ve tried, to no avail, every piece of css code, that I know of, to rotate the text.
Any1 who has some tips on how to rotate the text horizontally?

Here an image of my progress bars look at the moment:

What I’m trying to achieve:



Current CSS:

.inner-progressbar {
padding: 0px 0px !important;
border-radius: 0px 50px 50px 0px;
transform: rotateY: (90deg);

}

.progressbar-ProgressBar {
overflow: visible !important;
text-align: right !important;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.progressbar-label {

position: relative !important;

top: 0px !important;
background-color: #FFFFFF !important;
color: black !important;
height: 50px;
width: 50px;
padding: 20px;
left: 0px !important;
border-radius: 150px;
transform: rotate(90deg);
transform-origin: right, top;
-ms-transform: rotate(90deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:right, top;

}

.progressbar-label:after,
.progressbar-label:after {

direction: rtl ;

position: absolute;
top: 100%;
margin-left: 0px;
content: ‘’;
width: 0px;
height: 0;

}

This topic was automatically closed after 70 days. New replies are no longer allowed.